<template>
    <div class="page_root" :key="queryUpdateFlag" data-page-name="父工单详情" data-page-identification="s_dtzosavlog">
        <a-spin :spinning="pageLoading.loading" :tip="pageLoading.tip">
            <!-- begin vid_4wk3vtmqnu 面包屑_dpp8vl4jq5 -->
<!--            <a-breadcrumb class="vid_4wk3vtmqnu" style="word-break: break-word">-->
<!--                <a-breadcrumb-item-->
<!--                    v-for="(item, index) in vid_4wk3vtmqnu_props_tabConfig"-->
<!--                    :key="index"-->
<!--                    @click="handleBreadcrumbJump(router, item)"-->
<!--                    href=""-->
<!--                >-->
<!--                    <template v-if="vid_4wk3vtmqnu_props.rt_showIcon">-->
<!--                        <span v-if="/^(https?:|mailto:|tel:|data:image)/.test(item.icon)" role="img" class="anticon"-->
<!--                            ><embed style="width: 1em; height: 1em" :src="item.icon"-->
<!--                        /></span>-->
<!--                        <component v-else :is="item.icon" />-->
<!--                    </template>-->
<!--                    {{ item.title }}-->
<!--                </a-breadcrumb-item>-->
<!--            </a-breadcrumb>-->
            <!-- end vid_4wk3vtmqnu 面包屑_dpp8vl4jq5 -->
            <!--          关闭工单-->
            <a-modal
                :visible="newSopState.sopCloseVisible"
                centered
                @cancel="cancelClose"
                @ok="confirmSopClose"
                destroy-on-close
                width="800px"
                title="关闭"
                :mask-closable="false"
                :ok-button-props="{ loading: newSopState.closeLoading }"
            >
                <!--              如果是sop展示-->
                <div class="no-need-tip" v-if="currentCloseData.tag === 1">
                    <ExclamationCircleOutlined style="color: #fab221" />
                    请确认是否关闭该工单？ 您可以在勾选建立【剩余SOP子工单】，推进父工单解决；
                    并行SOP子工单解决人不支持重复建立【剩余SOP子工单】，已建立的将为您过滤；
                    并行SOP子工单解决人全部未勾选建立【剩余SOP子工单】，父工单直接进入已解决状态；
                </div>
                <a-form ref="closeRef" :model="newSopState">
                    <a-form-item label="备注" :rules="[{ required: true, message: '请输入备注', trigger: 'blur' }]" name="closeRemark">
                        <a-textarea v-model:value="newSopState.closeRemark" :rows="4" />
                    </a-form-item>
                </a-form>
                <div class="modal-sop-title" v-if="currentCloseData.tag === 1">剩余SOP</div>
                <div class="modal-table" v-if="currentCloseData.tag === 1">
                    <a-table
                        :columns="sopColumns"
                        :data-source="newSopState.sopTableData"
                        rowKey="sopStepId"
                        :row-selection="{
                            selectedRowKeys: newSopState.selectedRowKeys,
                            onChange: onSopSelectChange,
                            fixed: true,
                            getCheckboxProps: record => ({
                                disabled: record.disabled // Column configuration not to be checked
                            })
                        }"
                        bordered
                        :pagination="false"
                    />
                </div>
            </a-modal>
            <!--          关闭工单-->
            <!--          无需解决-->
            <a-modal
                :visible="sonState.noNeedVisible"
                centered
                destroy-on-close
                @cancel="cancelNoNeed"
                @ok="submitNoNeed"
                width="800px"
                title="无需解决"
                :mask-closable="false"
                :ok-button-props="{ loading: sonState.noNeedLoading }"
            >
                <!--              如果是sop展示-->
                <div class="no-need-tip" v-if="noNeedData.tag === 1">
                    <ExclamationCircleOutlined style="color: #fab221" />
                    请确认是否完成该工单？如该步骤包含附件请上传；<br />
                    您可以在勾选建立【剩余SOP子工单】，推进父工单解决；<br />
                    并行SOP子工单解决人不支持重复建立【剩余SOP子工单】，已建立的将为您过滤；<br />
                    并行SOP子工单解决人全部未勾选建立【剩余SOP子工单】，父工单直接进入已解决状态；<br />
                </div>
                <a-form ref="noNeedRef" :model="sonState">
                    <a-form-item label="备注" :rules="[{ required: true, message: '请输入备注', trigger: 'blur' }]" name="noNeedRemark">
                        <a-textarea v-model:value="sonState.noNeedRemark" :rows="4" />
                    </a-form-item>
                </a-form>
                <template v-if="noNeedData.tag === 1">
                    <div class="modal-sop-title">剩余SOP</div>
                    <div class="modal-table">
                        <a-table
                            :columns="sopColumns"
                            :data-source="newSopState.sopTableData"
                            rowKey="sopStepId"
                            :row-selection="{
                                selectedRowKeys: newSopState.selectedRowKeys,
                                onChange: onSopSelectChange,
                                fixed: true,
                                getCheckboxProps: record => ({
                                    disabled: record.disabled // Column configuration not to be checked
                                })
                            }"
                            bordered
                            :pagination="false"
                        />
                    </div>
                </template>
            </a-modal>
            <!--          无需解决-->
            <!--                  预览-->
            <a-modal
                v-model:visible="state.previewVisible"
                @cancel="handlepreviewCancel"
                width="1000px"
                title="图片预览"
                :footer="null"
            >
                <div>
                    <img :src="state.previewImage" alt="附件" style="width: 100%" />
                </div>
            </a-modal>
            <!--                  预览-->
            <!--          删除-->
            <a-modal
                centered
                v-model:visible="state.deleteVisible"
                title="删除"
                @ok="handleDelete"
                :ok-button-props="{ loading: state.deleteLoading }"
            >
                <!--                请确认是否删除该工单任务，如该工单建立了子工单请先对子工单进行解决后在进行删除操作。-->
                <a-form ref="deleteRef" :model="sonState">
                    <a-form-item label="备注" :rules="[{ required: true, message: '请输入备注', trigger: 'blur' }]" name="deleteRemark">
                        <a-textarea v-model:value="sonState.deleteRemark" :rows="4" />
                    </a-form-item>
                </a-form>
            </a-modal>
            <!--          删除-->
            <!--          新建/编辑备注-->
            <a-modal
                v-model:visible="state.addRemarkVisible"
                :title="state.remarkTitle"
                @ok="confirmRemark"
                width="880px"
                centered
                :ok-button-props="{ loading: state.remarkLoading }"
            >
                <div class="remark-modal">
                    <QuillEditor ref="remarkQuillRef" :options="editorOption" class="quill-editor"
                /></div>
            </a-modal>
            <!--          新建/编辑备注-->
            <!--          回复备注-->
            <a-modal
                v-model:visible="state.backRemarkVisible"
                centered
                title="回复备注"
                @ok="confirmBackRemark"
                width="880px"
                :ok-button-props="{ loading: state.remarkLoading }"
            >
                <div class="remark-modal">
                    <QuillEditor ref="backRemarkQuillRef" :options="editorOption" class="quill-editor"
                /></div>
            </a-modal>
            <!--          恢复备注-->
            <!--          查看附件-->
            <a-modal centered v-model:visible="state.fileVisible" title="附件" :footer="null">
                <div
                    class="top-title"
                    v-if="currentData.descriptionAttachmentList && currentData.descriptionAttachmentList.length"
                    >工单描述附件</div
                >
                <div class="file-content">
                    <div
                        v-for="(item, index) in currentData.descriptionAttachmentList"
                        :key="index"
                        style="margin-bottom: 10px"
                    >
                        <a-dropdown>
                            <span
                                style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis; display: block"
                                :title="item.name"
                            >
                                {{ item.name }}
                            </span>
                            <template #overlay>
                                <a-menu>
                                    <a-menu-item>
                                        <a-button
                                            style="width: 100%"
                                            type="link"
                                            size="small"
                                            @click="previewAttachment(item)"
                                            >预览</a-button
                                        >
                                    </a-menu-item>
                                    <a-menu-item>
                                        <a-button
                                            style="width: 100%"
                                            type="link"
                                            size="small"
                                            @click="handlerDownload(item)"
                                            >下载</a-button
                                        >
                                    </a-menu-item>
                                </a-menu>
                            </template>
                        </a-dropdown></div
                    >
                </div>
                <div class="top-title" v-if="currentData.attachmentList && currentData.attachmentList.length"
                    >完成证明附件</div
                >
                <div class="file-content">
                    <div v-for="(item, index) in currentData.attachmentList" :key="index" style="margin-bottom: 10px">
                        <a-dropdown>
                            <span
                                style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis; display: block"
                                :title="item.name"
                            >
                                {{ item.name }}
                            </span>
                            <template #overlay>
                                <a-menu>
                                    <a-menu-item>
                                        <a-button
                                            style="width: 100%"
                                            type="link"
                                            size="small"
                                            @click="previewAttachment(item)"
                                            >预览</a-button
                                        >
                                    </a-menu-item>
                                    <a-menu-item>
                                        <a-button
                                            style="width: 100%"
                                            type="link"
                                            size="small"
                                            @click="handlerDownload(item)"
                                            >下载</a-button
                                        >
                                    </a-menu-item>
                                </a-menu>
                            </template>
                        </a-dropdown></div
                    >
                </div>
            </a-modal>
            <!--          查看附件-->
            <!--          查看详情附件-->
            <a-modal centered v-model:visible="state.fileDetailVisible" title="工单解决证明附件" :footer="null">
                <div
                    class="top-title"
                    v-if="currentData.descriptionAttachmentList && currentData.descriptionAttachmentList.length"
                    >工单描述附件</div
                >
                <div class="file-content">
                    <div
                        v-for="(item, index) in currentData.descriptionAttachmentList"
                        :key="index"
                        style="margin-bottom: 10px"
                    >
                        <a-dropdown>
                            <span
                                style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis; display: block"
                                :title="item.name"
                            >
                                {{ item.name }}
                            </span>
                            <template #overlay>
                                <a-menu>
                                    <a-menu-item>
                                        <a-button
                                            style="width: 100%"
                                            type="link"
                                            size="small"
                                            @click="previewAttachment(item)"
                                            >预览</a-button
                                        >
                                    </a-menu-item>
                                    <a-menu-item>
                                        <a-button
                                            style="width: 100%"
                                            type="link"
                                            size="small"
                                            @click="handlerDownload(item)"
                                            >下载</a-button
                                        >
                                    </a-menu-item>
                                </a-menu>
                            </template>
                        </a-dropdown></div
                    >
                </div>
                <div class="top-title" v-if="currentData.attachmentList && currentData.attachmentList.length"
                    >完成证明附件</div
                >
                <div class="file-content">
                    <div v-for="(item, index) in currentData.attachmentList" :key="index">
                        <a-dropdown>
                            <span
                                style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis; display: block"
                                :title="item.name"
                            >
                                {{ item.name }}
                            </span>
                            <template #overlay>
                                <a-menu>
                                    <a-menu-item>
                                        <a-button
                                            style="width: 100%"
                                            type="link"
                                            size="small"
                                            @click="previewAttachment(item)"
                                            >预览</a-button
                                        >
                                    </a-menu-item>
                                    <a-menu-item>
                                        <a-button
                                            style="width: 100%"
                                            type="link"
                                            size="small"
                                            @click="handlerDownload(item)"
                                            >下载</a-button
                                        >
                                    </a-menu-item>
                                </a-menu>
                            </template>
                        </a-dropdown></div
                    >
                </div>
            </a-modal>
            <!--          查看附件-->

            <!--          大屏查看-->
            <a-modal
                :visible="state.detailVisible"
                :title="state.detailTitle"
                width="1200px"
                :footer="null"
                centered
                @cancel="state.detailVisible = false"
            >
                <div
                    style="max-height: 800px; overflow-y: auto"
                    v-html="getHtmlContent(JSON.stringify(state.detailDescription))"
                ></div>
            </a-modal>
            <!--          大屏查看-->
            <!--          删除-->

            <!--          删除-->
            <!--          新建/编辑工单-->
            <a-modal
                centered
                v-model:visible="state.editSonVisible"
                :title="state.modalTitle"
                @ok="submit"
                width="1000px"
                :ok-button-props="{ loading: state.sonLoading }"
                @cancel="resetSonForm"
            >
                <div class="form-content">
                    <a-form :model="state.modalForm" ref="sonRef">
                        <a-row>
                            <a-col :span="24">
                                <a-form-item
                                    label="工单标题"
                                    :rules="[{ required: true, message: '请输入工单标题', trigger: 'blur' }]"
                                    name="content"
                                >
                                    <a-input
                                        maxlength="100"
                                        show-count
                                        placeholder="请输入"
                                        v-model:value="state.modalForm.content"
                                    />
                                </a-form-item>
                            </a-col>
                        </a-row>

                        <a-row>
                            <a-col :span="24" v-if="state.gdDetail">
                                <a-form-item label="父工单计划解决时间">
                                    <span
                                        style="
                                            border: 1px solid #d9d9d9;
                                            width: 100%;
                                            height: 32px;
                                            display: block;
                                            padding: 4px 11px;
                                        "
                                        >{{ state.gdDetail.workOrderDto.endTime }}</span
                                    >
                                </a-form-item>
                            </a-col>
                            <a-col :span="24">
                                <a-form-item
                                    label="计划解决时间"
                                    :rules="[{ required: true, message: '请选择计划解决时间', trigger: 'blur' }]"
                                    name="endTime"
                                >
                                    <a-date-picker
                                        show-time
                                        placeholder="请选择"
                                        v-model:value="state.modalForm.endTime"
                                        value-format="YYYY-MM-DD HH:mm:ss"
                                    />
                                </a-form-item>
                            </a-col>
<!--                            <a-col :span="24">-->
<!--                                <a-form-item-->
<!--                                    label="解决人"-->
<!--                                    :rules="[{ required: true, message: '请选择解决人', trigger: 'blur' }]"-->
<!--                                    name="solverList"-->
<!--                                >-->
<!--                                    <a-select-->
<!--                                        show-search-->
<!--                                        allow-clear-->
<!--                                        class="remove-icon"-->
<!--                                        mode="multiple"-->
<!--                                        :options="state.allUser"-->
<!--                                        v-model:value="state.modalForm.solverList"-->
<!--                                        placeholder="请选择"-->
<!--                                        @change="fatherSolverChange"-->
<!--                                        :field-names="{ label: 'name', value: 'name' }"-->
<!--                                        :filter-option="-->
<!--                                            (input, option) => {-->
<!--                                                return option.name.toLowerCase().indexOf(input.toLowerCase()) >= 0-->
<!--                                            }-->
<!--                                        "-->
<!--                                    />-->
<!--                                </a-form-item>-->
<!--                            </a-col>-->
                        </a-row>
<!--                        <a-col>-->
<!--                            <div style="width: 700px; margin-left: 115px; margin-bottom: 16px">-->
<!--                                <a-->
<!--                                    href="javascript:;"-->
<!--                                    v-for="(item, num) in taskPeopleList"-->
<!--                                    @click="handlerAddPeople(item.value, index)"-->
<!--                                    ><span style="margin: 0 5px">{{ item.value }}</span></a-->
<!--                                >-->
<!--                            </div>-->
<!--                        </a-col>-->
                      <div class="description-tip" v-if="currentData.status !== '未开始'&&currentData.status"
                      ><ExclamationCircleFilled class="tip-img" /> 解决中的工单不支持编辑问题描述</div
                      >
                        <a-row>
                            <a-col
:span="24"   :style="{
                                pointerEvents: currentData.status === '未开始' || !currentData.status || currentData.status === '待分发' ? 'auto' : 'none'
                            }">
                                <a-form-item
                                    label="问题描述"
                                    :rules="[{ required: true, message: '请输入问题描述', trigger: 'blur' }]"
                                    name="quillData"
                                >
                                    <QuillEditor
                                        v-model:content="state.modalForm.quillData"
                                        ref="quillEditor"
                                        :options="editorOption"
                                        class="quill-editor"
                                    />
                                </a-form-item>
                            </a-col>
                        </a-row>
                        <a-col :span="24">
                            <a-form-item label="上传附件">
                                <a-upload
                                    v-model:file-list="state.modalForm.descriptionAttachmentList"
                                    :multiple="true"
                                    :before-upload="handlerFatherUpload"
                                    @remove="handlerFatherRemove"
                                    accept=".xlsx, image/*,.docx,, .xls,.mp4"
                                >
                                    <a-button type="primary">
                                        <upload-outlined />
                                        上传
                                    </a-button>
                                </a-upload>
                                <span>支持格式：.xlsx, image/*,.docx,, .xls,.mp4</span>
                            </a-form-item>
                        </a-col>
                    </a-form>
                </div>
            </a-modal>
            <!--          编辑子工单-->
          <!--          流转变更-->
          <a-modal
            centered
            v-model:visible="newState.circulationVisible"
            title="流转"
            width="800px"
            @ok="confirmCirculation"
            :body-style="{
                  paddingBottom:0
                }"
            destroy-on-close
            :ok-button-props="{
                    loading: newState.changeStatusLoading
                }"
            @cancel="cancelCirculation"
          >
            <div class="change-status">
              <a-form :model="newState.circulationForm" ref="circulationFormRef">
                <a-row>
                  <a-col :span="24">
                    <a-form-item
                      label="解决人"
                      :rules="[{ required: true, message: '请选择解决人', trigger: 'blur' }]"
                      name="solverList"
                    >
                      <a-select
                        class="remove-icon"
                        show-search
                        mode="multiple"
                        :options="state.allUser"
                        v-model:value="newState.circulationForm.solverList"
                        @change="changeStatusSolverChange"
                        placeholder="请选择"
                        :field-names="{ label: 'name', value: 'name' }"
                        :filter-option="
                                            (input, option) => {
                                                return option.name.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                            }
                                        "
                      />
                    </a-form-item>
                  </a-col>
                </a-row>
              </a-form>
            </div>
          </a-modal>
          <!--          流转变更-->
          <!--          解决中变更-->
          <a-modal
            centered
            v-model:visible="newState.resolvingVisible"
            title="开始解决"
            width="800px"
            destroy-on-close
            :ok-button-props="{
                    loading: newState.changeStatusLoading
                }"
            @cancel="cancelResolving"
          >
            <template #footer>
              <a-space>
                <a-button type="default" @click="cancelResolving">取消</a-button>
                <a-button
                  type="primary"
                  @click="handleDownLoadSopTemplate(currentResolvingData)"
                  :loading="downTemplateFileLoading"
                  v-if="currentResolvingData.tag === 1"
                >下载附件模板</a-button
                >
                <a-button type="primary" @click="confirmResolving" :loading="newState.changeStatusLoading">确定</a-button>
              </a-space>
            </template>
            <template v-if="currentResolvingData.tag === 1">
<!--              <div class="sop-start-tip">-->
<!--                <ExclamationCircleOutlined style="color: #fab221" />-->
<!--                  确定开始处理工单吗-->
<!--              </div>-->
<!--              <div class="modal-table">-->
<!--                <a-table-->
<!--                  :columns="sopColumns"-->
<!--                  :data-source="newSopState.sopTableData"-->
<!--                  rowKey="sopStepId"-->
<!--                  :row-selection="{-->
<!--                                selectedRowKeys: newSopState.selectedRowKeys,-->
<!--                                onChange: onSopSelectChange,-->
<!--                                fixed: true,-->
<!--                                           getCheckboxProps: (record: DataType) => ({-->
<!--    disabled: record.disabled, // Column configuration not to be checked-->
<!--  }),-->
<!--                            }"-->
<!--                  bordered-->
<!--                  :pagination="false"-->
<!--                >-->
<!--                  <template #bodyCell="{ record, text, column, index }">-->
<!--                    <template v-if="column.dataIndex === 'sequence'">-->
<!--                      <a-input v-model:value="record.sequence" />-->
<!--                    </template>-->
<!--                  </template>-->
<!--                </a-table>-->
<!--              </div>-->
            </template>
            <div class="change-status"> 确定开始处理工单吗 </div>
            <!--              如果是sop父工单展示这个-->
          </a-modal>

            <a-modal
                centered
                v-model:visible="newState.resolvedVisible"
                title="已解决"
                width="1000px"
                :body-style="{
                    paddingBottom: 0,
                    maxHeight: '800px',
                    overflowY: 'auto'
                }"
                @ok="confirmResolved"
                destroy-on-close
                :ok-button-props="{
                    loading: newState.changeStatusLoading
                }"
                @cancel="cancelResolved"
            >
                <template #footer>
                    <a-space>
                        <a-button type="default" @click="cancelResolved">取消</a-button>
                        <a-button
                            v-if="resolvedData.tag === 1"
                            type="primary"
                            @click="handleDownLoadSopTemplate(resolvedData)"
                            :loading="downTemplateFileLoading"
                        >下载附件模板</a-button
                        >
                        <a-button type="primary" @click="confirmResolved" :loading="newState.changeStatusLoading"
                        >确定</a-button
                        >
                    </a-space>
                </template>
                <div class="change-status" >
                    <template v-if="resolvedData.tag === 1">
                        <div class="change-status-resolved">
                            <div class="resolved-div">
                                <ExclamationCircleOutlined style="color: #fab221" />
                                请确认是否完成该工单？如该步骤包含附件请上传；<br />
                                您可以在勾选建立【剩余SOP子工单】，推进父工单解决；<br />
                                并行SOP子工单解决人不支持重复建立【剩余SOP子工单】，已建立的将为您过滤；<br />
                                并行SOP子工单解决人全部未勾选建立【剩余SOP子工单】，父工单直接进入已解决状态；<br />
                            </div>
                            <div class="upload-file">
                                <a-upload
                                    v-model:file-list="newState.resolvedForm.attachmentList"
                                    :multiple="true"
                                    :before-upload="handlerResolvedUpload"
                                    @remove="handlerResolvedRemove"
                                    accept=".xlsx, image/*,.docx,, .xls,.mp4"
                                >
                                    <a-button type="primary" ghost style="background: rgba(56, 117, 255, 0.1)">
                                        <upload-outlined />
                                        上传附件
                                    </a-button>
                                </a-upload>
                            </div>
                        </div>
                        <div class="modal-table">
                            <a-table
                                :columns="sopColumns"
                                :data-source="newSopState.solvedSOPList"
                                bordered
                                :pagination="false"
                            />
                        </div>
                    </template>
                    <a-form :model="newState.resolvedForm" ref="resolvedFormRef" style="margin-top: 16px">
                        <a-row>
                            <a-col :span="24">
                                <a-form-item
                                    label="解决方案详述"
                                    :rules="newRules.solutionDetail"
                                    name="solutionDetail"
                                >
                                    <QuillEditor
                                        ref="resolvedQuillRef"
                                        :options="editorOption"
                                        class="quill-editor"
                                        v-model:content="newState.resolvedForm.solutionDetail"
                                    /></a-form-item>
                            </a-col>
                        </a-row>
                    </a-form>
                    <template v-if="resolvedData.tag === 1">
                        <div class="modal-sop-title">剩余SOP工单</div>
                        <div class="modal-table">
                            <a-table
                                :columns="sopColumns"
                                :data-source="newSopState.sopTableData"
                                rowKey="sopStepId"
                                :row-selection="{
                                selectedRowKeys: newSopState.selectedRowKeys,
                                onChange: onSopSelectChange,
                                fixed: true,
                                           getCheckboxProps: (record: DataType) => ({
    disabled: record.disabled, // Column configuration not to be checked
  }),
                            }"
                                bordered
                                :pagination="false"
                            />
                        </div>
                    </template>
                </div>
            </a-modal>
          <!--          已解决变更-->
<!--            改变根因分析提示-->
            <a-modal :visible="tipState.visible" title="提示" :mask-closable="false" centered @ok="confirmRoot" @cancel="cancelRoot">
                切换根因分析后，已编辑的根因解释将被覆盖
            </a-modal>
<!--            改变根因分析提示-->
            <div class="body">
                <div class="top-information" v-if="state.gdDetail?.workOrderDto">
                    <div class="information-top">
                        <div class="title"> <div class="title-icon"></div> 基本信息</div>
                        <div class="gd-status" :style="getColorStyle(state.gdDetail.workOrderDto.status)">{{state.gdDetail.workOrderDto.status}}</div>
                    </div>
                    <div class="information-table">
                        <div class="one-line">
                            <div class="table-title">工单标题</div>
                            <div class="table-content-one">{{ state.gdDetail.workOrderDto.content }}</div>
                        </div>
                        <div class="four-line middle-div">
                          <div class="table-title">工单编号</div>
                          <div class="table-content-four">{{ state.gdDetail.workOrderDto.number }}</div>
                            <div class="table-title middle">工单类型</div>
                            <div class="table-content-four">{{ state.gdDetail.workOrderDto.type }}</div>
                            <div class="table-title middle">优先级</div>
                            <div class="table-content-four">{{ state.gdDetail.workOrderDto.priority }}</div>

                        </div>
                        <div class="four-line middle-div">
                          <div class="table-title ">问题来源</div>
                          <div class="table-content-four">{{ state.gdDetail.workOrderDto.questionSource }}</div>
                            <div class="table-title middle">所属区域</div>
                            <div class="table-content-four">{{ state.gdDetail.workOrderDto.areaName }}</div>
                            <div class="table-title middle">所属项目</div>
                            <div class="table-content-four">{{ state.gdDetail.workOrderDto.projectName }}</div>

                        </div>
                        <div class="four-line middle-div">
                          <div class="table-title ">所属产品</div>
                          <div class="table-content-four">{{ state.gdDetail.workOrderDto.production }}</div>
                            <div class="table-title middle">环境</div>
                            <div class="table-content-four">{{ state.gdDetail.workOrderDto.environment }}</div>
                            <div class="table-title middle">项目经理</div>
                            <div class="table-content-four">{{ state.gdDetail.workOrderDto.pmName }}</div>

                        </div>
                        <div class="four-line middle-div">
                          <div class="table-title ">PMO</div>
                          <div class="table-content-four">{{ state.gdDetail.workOrderDto?.pmo }}</div>
                            <div class="table-title middle">所属客户</div>
                            <div class="table-content-four">{{ state.gdDetail.workOrderDto?.customer }}</div>
                            <div class="table-title middle">创建人(owner)</div>
                            <div class="table-content-four">{{ state.gdDetail.workOrderDto.createdBy }}</div>

                        </div>
                        <div class="four-line middle-div">
                          <div class="table-title"> 解决人</div>
                          <div class="table-content-four">{{ state.gdDetail.workOrderDto.solver }}</div>
                            <div class="table-title middle">创建时间</div>
                            <div class="table-content-four">{{ state.gdDetail.workOrderDto?.createdTime }}</div>
                            <div class="table-title middle">计划解决时间</div>
                            <div class="table-content-four">{{ state.gdDetail.workOrderDto?.endTime }} </div>
                        </div>
                    </div>
                </div>
                <div class="problem-description">
                    <div class="information-top">
                        <div class="title"> <div class="title-icon"></div> 操作</div>
                    </div>
                <ButtonItem :id="state.detailId"/>
                </div>
                <div class="problem-description">
                    <div class="information-top">
                        <div class="title"> <div class="title-icon"></div> 问题描述</div>
                    </div>
                    <div class="description-content" v-html="getHtmlContent(state.detailDescription)">
                    </div>
                    <div class="description-fileList">
                        <div class="title"> <div class="title-icon"></div> 问题描述附件</div>
                        <div class="file-drag">
                            <a-upload-dragger
                                v-model:file-list="newState.descriptionFileList"
                                name="file"
                                :multiple="true"
                                :before-upload="handlerDescriptionUpload"
                                @remove="handlerDescriptionRemove"
                                accept=".pdf, image/*,.doc,docx,, .xls,.ppt,.pptx,.html"
                            >
                                <p class="file-top"> 将你的想上传的文件拖拽至此处 </p>
                                <p style="display: flex;align-items: center;flex-direction: column"><div class="ant-upload-drag-icon">上传附件</div> </p>
                              <p class="file-bottom">
      支持格式：PDF、DOC、DOCX、PPT、PPTX、PNG、JPG、JPEG、HTML
                              </p>
                            </a-upload-dragger>
                        </div>
                    </div>
                </div>
<!--                <div class="problem-description">-->
<!--                    <div class="information-top">-->
<!--                        <div class="title" style="margin-bottom: 16px"> <div class="title-icon"></div> 解决方案概述</div>-->
<!--                      <div> <a-button type="primary" @click="saveRoot" :loading="newState.saveLoading">保存</a-button></div>-->
<!--                    </div>-->
<!--                    <a-textarea v-model:value="newState.solution" :rows="8"/>-->
<!--                </div>-->
                <div class="problem-description abbreviation">
                    <div class="information-top">
                        <div class="title" style="margin-bottom: 16px"> <div class="title-icon"></div> 根因分析</div>
                        <div> <a-button type="primary" @click="saveRoot" :loading="newState.saveLoading" :disabled="!rootState.rootCauseFlag" title="仅支持父子工单解决人填写根因分析">保存</a-button></div>
                    </div>
                    <div class="resolved-div">   <ExclamationCircleOutlined style="color: #fab221" />仅支持父子工单解决人填写根因分析</div>
                        <a-row :gutter="24">
                            <a-col :span="6">
                                <a-form-item label="责任方" :labelCol="{ span: 4 }" :wrapperCol="{ span: 20 }">
                                    <a-select
                                        allow-clear
                                        show-search
                                        style="width: 100%"
                                        v-model:value="rootState.responsibleParty"
                                        :options="rootState.responsiblePartyList"
                                        placeholder="请选择"
                                        :field-names="{ label: 'itemName', value: 'itemName' }"
                                        :filterOption="
                                                    (input, option) => {
                                                        return (
                                                            option.itemName.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                                        )
                                                    }
                                                "
                                        @focus="getResponsiblePartyList"
                                        @change="responsiblePartyChange"
                                    />
                                </a-form-item>
                            </a-col>
                            <a-col :span="6">
                                <a-form-item label="业务类型" :labelCol="{ span: 4 }" :wrapperCol="{ span: 20 }">
                                    <a-select
                                        allow-clear
                                        show-search
                                        style="width: 100%"
                                        v-model:value="rootState.businessType"
                                        :options="rootState.businessTypeList"
                                        placeholder="请选择"
                                        :field-names="{ label: 'itemName', value: 'itemName' }"
                                        :filterOption="
                                                    (input, option) => {
                                                        return (
                                                            option.itemName.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                                        )
                                                    }
                                                "
                                        @focus="getBusinessTypeList"
                                        @change="businessTypeChange"
                                    />
                                </a-form-item>
                            </a-col>
                            <a-col :span="12">
                                <a-form-item label="根因分析" :labelCol="{ span: 2 }" :wrapperCol="{ span: 22 }">
                                    <a-select
                                        allow-clear
                                        show-search
                                        style="width: 100%"
                                        v-model:value="rootState.rootCauseClassify"
                                        :options="rootState.rootCauseClassifyList"
                                        placeholder="请选择"
                                        :field-names="{ label: 'itemName', value: 'itemName' }"
                                        :filterOption="
                                                    (input, option) => {
                                                        return (
                                                            option.itemName.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                                        )
                                                    }
                                                "
                                        @focus="getRootCauseClassifyList"
                                        @change="rootCauseClassifyChange"
                                    />
                                </a-form-item>
                            </a-col>
                        </a-row>
                        <QuillEditor
                            ref="rootQuillEditor"
                            :options="editorOption"
                            class="quill-editor"
                        />
<!--                    <div v-else>-->
<!--                        <div class="resolved-div">   <ExclamationCircleOutlined style="color: #fab221" />仅支持父子工单解决人填写根因分析</div>-->
<!--                        <div v-if="rootDetailMsg" class="remark-text" v-html="getHtmlContent(JSON.stringify(rootDetailMsg))"> </div>-->
<!--                    </div>-->

                </div>
              <div class="problem-description abbreviation">
                <div class="information-top">
                  <div class="title" style="margin-bottom: 16px"> <div class="title-icon"></div> 解决方案详述</div>
                  <div> <a-button type="primary" @click="saveRoot" :loading="newState.saveLoading">保存</a-button></div>
                </div>
                <QuillEditor
                  ref="solutionQuillEditor"
                  :options="editorOption"
                  class="quill-editor"
                />
              </div>
              <div class="problem-description">
                <div class="information-top">
                  <div class="title"> <div class="title-icon"></div> 解决证明附件</div>
                </div>
                <div class="description-fileList">
                  <div class="file-drag">
                    <a-upload-dragger
                      v-model:file-list="newState.solveFileList"
                      name="file"
                      :multiple="true"
                      :before-upload="handlerSolveUpload"
                      @remove="handlerSolveRemove"
                      accept=".pdf, image/*,.doc,docx,, .xls,.ppt,.pptx,.html"
                    >
                      <p class="file-top"> 将你的想上传的文件拖拽至此处 </p>
                      <p style="display: flex;align-items: center;flex-direction: column"><div class="ant-upload-drag-icon">上传附件</div> </p>
                      <p class="file-bottom">
                        支持格式：PDF、DOC、DOCX、PPT、PPTX、PNG、JPG、JPEG、HTML
                      </p>
                    </a-upload-dragger>
                  </div>
                </div>
              </div>
                <div class="son-gd" >
                    <div class="information-top">
                        <div class="title"> <div class="title-icon"></div> 子工单列表</div>
                        <div> <a-button type="primary" @click="handleAdd">新建子工单</a-button></div>
                    </div>
                    <div
                        class="collapse-bottom"
                        v-if="
                            state.gdDetail.workOrderDto?.subWorkOrderDtoList &&
                            state.gdDetail.workOrderDto?.subWorkOrderDtoList.length > 0
                        "
                    >
                        <div
                            class="item-children"
                            v-for="(child, index) in state.gdDetail.workOrderDto?.subWorkOrderDtoList"
                            :key="index"
                        >
                            <div class="collapse-title">
                                <div class="collapse-title-left">
                                    <div class="gd-title" :title="child.content">{{ child.content }}</div>
                                </div>
                                <div class="collapse-title-right">
                                    <div class="border-div">
                                        <span class="collapse-title-font">状态：</span>
                                        <span class="collapse-content-font">{{ child.status }}</span>
                                        <div class="border-line"></div>
                                    </div>
                                    <div class="border-div">
                                        <span class="collapse-title-font">是否超时：</span>
                                        <span class="collapse-content-font">{{ child.timeout }}</span>
                                        <div class="border-line"></div>
                                    </div>
                                    <div class="border-div">
                                        <span class="collapse-title-font">解决进度：</span>
                                        <span class="collapse-content-font">{{ child.progress }}</span>
                                    </div>
                                  <div class="collapse-title-right-btn">
                                    <a-button
                                      type="primary"
                                      ghost
                                      size="small"
                                      class="btn-item"
                                      @click="showCirculation(child)"
                                      :disabled="
                                                          isCirculationDisabled(child)
                                                        "
                                    >流转
                                    </a-button>
                                      <template
                                          v-if="
                                                                    ['已解决','无需解决'].includes(child.status)
                                                                "
                                      >
                                          <a-popconfirm
                                              v-if="!isReOpenDisabled(item)"
                                              title="请确认是否重新打开工单？"
                                              @confirm="handlerReOpen(child)"
                                          >
                                              <a-button
                                                  :disabled="isReOpenDisabled(item)"
                                                  type="primary"
                                                  ghost
                                                  size="small"
                                                  class="btn-item"
                                              >重新打开</a-button
                                              >
                                          </a-popconfirm>
                                      </template>
                                      <template v-else>
                                          <a-button
                                              type="primary"
                                              ghost
                                              size="small"
                                              class="btn-item"
                                              @click="showResolving(child)"
                                              :disabled="isResolvingDisabled(child)"
                                          >开始解决</a-button
                                          >
                                      </template>
<!--                                    <a-button-->
<!--                                      type="primary"-->
<!--                                      ghost-->
<!--                                      size="small"-->
<!--                                      class="btn-item"-->
<!--                                      @click="showResolving(child)"-->
<!--                                      :disabled="-->
<!--                                                           isResolvingDisabled(child)-->
<!--                                                        "-->
<!--                                    >开始解决-->
<!--                                    </a-button>-->
                                    <a-button
                                      type="primary"
                                      ghost
                                      size="small"
                                      class="btn-item"
                                      @click="showResolved(child)"
                                      :disabled="
                                                           isResolvedDisabled(child)
                                                        "
                                    >已解决
                                    </a-button>
                                    <a-button
                                      type="primary"
                                      ghost
                                      size="small"
                                      class="btn-item"
                                      @click="showNoNeed(child)"
                                      :disabled="isNoNeedSolveDisabled(child)"
                                    >无需解决
                                    </a-button>
<!--                                    <a-button-->
<!--                                      type="primary"-->
<!--                                      ghost-->
<!--                                      size="small"-->
<!--                                      class="btn-item"-->
<!--                                      :disabled="isCloseDisabled(child)"-->
<!--                                      @click="handlerClose(child)"-->
<!--                                    >关闭-->
<!--                                    </a-button>-->
                                    <a-button
                                      type="primary"
                                      ghost
                                      size="small"
                                      class="btn-item"
                                      @click="handleSonDetail(child.id)"
                                    >详情
                                    </a-button>
                                    <a-button
                                      type="primary"
                                      ghost
                                      size="small"
                                      class="btn-item"
                                      :disabled="isEditDisabled(child)"
                                      @click="handleEdit(child)"
                                    >编辑
                                    </a-button>
                                    <a-button
                                      type="primary"
                                      ghost
                                      size="small"
                                      class="btn-item"
                                      @click="toDelete(child)"
                                      :disabled="!((child.status === '未开始'||child.status === '待分发') && child.myCreated)"
                                    >删除
                                    </a-button>

                                    <a-popconfirm
                                      title="请确认是否提醒该工单相关人员？"
                                      @confirm="toRmind(item.id)"
                                      :disabled="!child.pmoOrNot"
                                    >
                                      <a-button
                                        type="primary"
                                        ghost
                                        size="small"
                                        class="btn-item"
                                        @click="toRmind(child)"
                                        :disabled="!child.pmoOrNot"
                                      >催办
                                      </a-button>
                                    </a-popconfirm>
                                  </div>
                                </div>
                            </div>
                            <div class="child-inner">
                              <div class="child-content">
                                <div class="inner-main">
                                  <div class="border-line"></div>
                                  <span class="inner-title">工单编号：</span>
                                  <div class="inner-content">{{ child.number }}</div>
                                </div>
                              </div>
                                <div class="child-content">
                                    <div class="inner-main">
                                        <div class="border-line"></div>
                                        <span class="inner-title">创建人(owner)：</span>
                                        <div class="inner-content">{{ child.createdBy }}</div>
                                    </div>
                                </div>
                                <div class="child-content">
                                    <div class="inner-main">
                                        <div class="border-line"></div>
                                        <span class="inner-title">创建时间：</span>
                                        <div class="inner-content">{{ child.createdTime }}</div>
                                    </div>
                                </div>
                                <div class="child-content">
                                    <div class="inner-main">
                                        <div class="border-line"></div>
                                        <span class="inner-title">解决人：</span>
                                        <div class="inner-content">{{ child.solver }}</div>
                                    </div>
                                </div>
                                <div class="child-content">
                                    <div class="inner-main">
                                        <span class="inner-title">计划解决时间：</span>
                                        <div class="inner-content">{{ child.endTime }}</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!--              备注-->
                <div class="body-bottom">
                    <div class="remark-div">
                        <div class="information-top">
                            <div class="title"> <div class="title-icon"></div> 历史备注</div>
                            <div class="title-right">
                                <a-button type="primary" @click="handleAddRemark">新建</a-button>
                            </div>
                        </div>
                        <div
                            v-for="(item, index) in state.gdDetail.workOrderRemarkDtoList"
                            :key="index"
                            class="remark-main"
                        >
                            <div class="remark-top">
                                <div class="remark-title-left">
                                    <div class="remark-title"
                                        >创建人(owner)：<span class="remark-weight">{{ item.createdBy }}</span></div
                                    >
                                    <div class="remark-title"
                                        >创建时间：<span class="remark-weight">{{ item.createdTime }}</span></div
                                    >
                                </div>
                                <div class="remark-title-right">
                                    <div class="collapse-title-right-btn">
                                        <div class="btn-item" @click="feedBackRemark(item)"
                                            >回复 <div class="border-btn"></div
                                        ></div>
                                        <div class="btn-item" @click="editRemark(item)"
                                            >编辑 <div class="border-btn"></div
                                        ></div>
                                        <a-popconfirm
                                            title="确定要删除这条备注吗？"
                                            @confirm="handlerDeleteRemark(item)"
                                        >
                                            <div class="btn-item">删除 </div>
                                        </a-popconfirm>
                                    </div>
                                </div>
                            </div>
                            <div class="remark-content">
                                <div style="font-size: 14px; color: #262626; letter-spacing: 0; font-weight: 500"
                                    >备注:</div
                                >
                                <div class="remark-text" v-html="getHtmlContent(item.content)"> </div>
                                <div v-for="(child, index) in item.feedbackWorkOrderRemarkDtoList" class="remark-child">
                                    <div class="collapse-title">
                                        <div class="remark-title-left">
                                            <div class="remark-title"
                                                >回复人：<span class="remark-weight">{{ child.createdBy }}</span></div
                                            >
                                            <div class="remark-title"
                                                >回复时间：<span class="remark-weight">{{
                                                    child.createdTime
                                                }}</span></div
                                            >
                                        </div>

                                        <div class="remark-title-right">
                                            <div class="collapse-title-right-btn">
                                                <div class="btn-item" @click="editRemark(child)"
                                                    >编辑 <div class="border-btn"></div
                                                ></div>
                                                <a-popconfirm
                                                    title="确定要删除这条回复吗？"
                                                    @confirm="handlerDeleteFeedBack(child)"
                                                >
                                                    <div class="btn-item">删除 </div>
                                                </a-popconfirm>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="remark-inner" v-html="getHtmlContent(child.content)"> </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="change-record">
                        <div class="information-top">
                            <div class="title"> <div class="title-icon"></div> 操作日志</div>
                        </div>
                      <div class="operation-log" v-for="(item,index) in state.tableData" :key="index">
                        <div class="opration-title">
                          <div class="circle">
                            <div class="circle-line" v-if="index!==0"></div>
                            <div class="inner-circle"></div>
                          </div>
                          <div class="title-content">{{item.month}}</div>
                        </div>
                        <div class="opration-content" v-for="(son,index) in item.workOrderChangeRecordList" :key="index">
                          <div class="item-content item-content1">
                            <div class="content-line"></div>
                            <div class="opration-title">触发时间：</div>
                            <div class="opration-msg" :title="son.submissionTime">{{ son.submissionTime }}</div>
                          </div>
                          <div class="item-content item-content2">
                            <div class="content-line"></div>
                            <div class="opration-title">操作人：</div>
                            <div class="opration-msg" :title="son.submitter">{{ son.submitter }}</div>
                          </div>
                          <div class="item-content item-content3">
                            <div class="content-line"></div>
                            <div class="opration-title">操作内容：</div>
                            <div class="inner-msg" :title="son.classify">{{
                                son.classify
                              }}</div>
                          </div>
                          <div class="item-content item-content3">
                            <div class="content-line"></div>
                            <div class="opration-title">备注：</div>
                              <a-tooltip
:overlay-style="{
                                  maxWidth:'200px'
                              }">
                                  <template #title>{{son.remark }}</template>
                                  <div class="inner-msg" >{{son.remark }}</div>
                              </a-tooltip>

                          </div>
                          <div class="item-content item-content5">
                            <div class="content-line"></div>
                            <div class="opration-title">工单编号：</div>
                            <div class="inner-msg" :title="son.workOrderNumber">{{
                                son.workOrderNumber
                              }}</div>
                          </div>
                          <div class="item-content item-content4">
                            <div class="opration-title">工单标题：</div>
                            <div class="opration-msg" :title="son.content">{{ son.content }}</div>
                          </div>
                        </div>
                      </div>
                    </div>
                </div>
                <!--              备注-->
            </div>
        </a-spin>
    </div>
</template>
<script setup lang="tsx">
    import {
        h,
        ref,
        reactive,
        toRaw,
        markRaw,
        watch,
        computed,
        onBeforeMount,
        onMounted,
        onBeforeUnmount,
        onUnmounted,
        onActivated,
        onDeactivated
    } from 'vue'
    import { useRoute, useRouter } from 'vue-router'

    const router = useRouter()
    const route = useRoute()
    import { get, post, put, del, request, requestWithHeaders } from '@/utils/http/Axios'
    import {
        cloneDeep,
        localGet,
        merge,
        getDifferenceArray,
        traversalTreeStructure,
        checkCaseCondition,
        renderStringInTemplate,
        handleBreadcrumbJump,
        throttle,
        permission,
        getComponentParamsValue
    } from '@/utils/index'
    import { isNullOrEmpty, isEmptyArr, isNullOrUnDef, isContained, isArray, isEmpty, isObject } from '@/utils/is'
    import dayjs from 'dayjs'
    import { getPagePcChartsDataSourceConvert } from '@/utils/chart'
    import { message, notification, Modal } from 'ant-design-vue'
    import {
        propertyFormatByNumber,
        propertyFormatByPercentage,
        propertyFormatByDate,
        parseSubFromDataList
    } from '@/utils/format'
    import colorTheme from '@/design/custom-theme.json'

    /*** PUBLISH_EXEGESIS ***
 import UserTableRecords from '@/model/UserTableRecords';
 import { getAppBaseUrl } from '@/utils/index';
 import { sendToken } from "@/hooks/useIframeToken";
 import { useSystemStore } from "@/store/modules/system";
 const systemStore = useSystemStore();
 *** PUBLISH_EXEGESIS ***/

    // 获取传入的流程ID和组件参数
    const props = defineProps({
        'processInstanceId': {
            type: [String, Number, Boolean],
            default: undefined
        }
    })
    const immediateWatch = (source, callback) => {
        watch(source, callback, { deep: true, immediate: true })
    }

    /* -------------------------- 属性定义 -------------------------- */

    const setTimeOutList = []
    const pageLoading = reactive({
        loading: false,
        tip: undefined
    })
    const authInfo = localGet('app-user-store')

    const vid_4wk3vtmqnu_props = reactive({
        rt_showIcon: false
    })

    // 处理校验
    const setSubFormName = (parentInfo, name) => {
        return [parentInfo.parents, parentInfo.cycleIndex, name]
    }

    /* ========================== 属性定义 ========================== */

    /* -------------------------- 元素数据引用 -------------------------- */

    /* ========================== 元素数据引用 ========================== */

    /* -------------------------- 页面数据 -------------------------- */

    /* ========================== 页面数据 ========================== */

    /* -------------------------- 响应 -------------------------- */

    /* ========================== 响应 ========================== */

    /* -------------------------- 函数 -------------------------- */

    /* ========================== 函数 ========================== */

    /* -------------------------- 页面参数 -------------------------- */

    const pageParameter_state = reactive({
        'processInstanceId': props.processInstanceId ?? route.query.processInstanceId
    })

    /* ========================== 页面参数 ========================== */

    /* -------------------------- 组件事件处理方法 -------------------------- */

    // ---------------------------- 组件数据同步 ----------------------------

    // ============================ 组件数据同步 ============================

    /* ========================== 组件事件处理方法 ========================== */

    /* -------------------------- 生命周期 -------------------------- */
    // 用于参数变更后重新执行自定义指令
    const queryUpdateFlag = ref(0)
    onMounted(() => {})

    onUnmounted(() => {
        // 销毁定时器
        setTimeOutList.forEach(({ repeat, timer }) => {
            repeat ? clearInterval(timer) : clearTimeout(timer)
        })
    })

    /* ========================== 生命周期 ========================== */

    /* -------------------------- 数据关联处理 -------------------------- */

    /* -------------------------- 表单数据同步 -------------------------- */
    /* ========================== 表单数据同步 ========================== */

    /* ========================== 数据关联处理 ========================== */

    /* -------------------------- 不同组件自定义的处理逻辑 -------------------------- */
    const vid_4wk3vtmqnu_props_tabConfig = computed(() => {
        const initValue = [
            {
                'key': 'tab1',
                'title': '工单管理',
                'targetPage': {
                    'settingType': 'PAGE_LIST',
                    'url': '/app_50000005/page/3000000784',
                    'customUrl': '',
                    'modelId': 3000000784,
                    'parameter': []
                },
                'icon': '',
                'parameter': [],
                'applicationId': 50000005,
                'query': {}
            },
            {
                'key': 'tab2',
                'title': '工单详情',
                'icon': '',
                'targetPage': { 'settingType': '', 'url': '', 'customUrl': '' },
                'parameter': [],
                'applicationId': 50000005,
                'query': {}
            }
        ]
        return initValue
    })
    /*** PUBLISH_EXEGESIS ***
 systemStore.addBreadcrumbInfo(vid_4wk3vtmqnu_props_tabConfig.value);
 *** PUBLISH_EXEGESIS ***/
    /* ========================== 不同组件自定义的处理逻辑 ========================== */

    // ================================定制化逻辑========================================
    import { nextTick } from 'vue'
    //     富文本设置
    onMounted(() => {
        const urlParams = new URLSearchParams(window.location.search)
        // 获取单个参数
        state.detailId = Number(urlParams.get('id'))
        state.modalForm.parentId = state.detailId
        // initTitle()
        getData()
      getAllUser()
        getClassfy()
    })
    const quillMsgRef = ref(null)
    import { QuillEditor, Quill } from '@vueup/vue-quill'
    import ImageUploader from 'quill-image-uploader'
    import '@vueup/vue-quill/dist/vue-quill.snow.css'
    const titleConfig = [
        { Choice: ' .ql-bold', title: '加粗' },
        { Choice: ' .ql-italic', title: '斜体' },
        { Choice: ' .ql-underline', title: '下划线' },
        { Choice: ' .ql-strike', title: '删除线' },
        { Choice: ' .ql-blockquote', title: '块引用' },
        { Choice: ' .ql-code-block', title: '插入代码' },
        { Choice: ' .ql-size', title: '字体大小' },
        { Choice: ' .ql-size', title: '字体大小' },
        { Choice: ' .ql-color', title: '字体颜色' },
        { Choice: ' .ql-background', title: '字体背景颜色' },
        { Choice: ' .ql-list[value="ordered"]', title: '有序列表' },
        { Choice: ' .ql-list[value="bullet"]', title: '无序列表' },
        { Choice: ' .ql-header[value="1"]', title: '1级标题' },
        { Choice: ' .ql-header[value="2"]', title: '2级标题' },
        { Choice: ' .ql-align', title: '对齐方式' },
        { Choice: ' .ql-clean', title: '清除字体格式' },
        { Choice: ' .ql-image', title: '图像' },
        { Choice: ' .ql-size .ql-picker-item[data-value="small"]', title: '小号' },
        { Choice: ' .ql-size .ql-picker-item[data-value="large"]', title: '大号' },
        { Choice: ' .ql-size .ql-picker-item[data-value="huge"]', title: '超大号' },
        { Choice: ' .ql-size .ql-picker-item:nth-child(2)', title: '标准' },
        { Choice: ' .ql-align .ql-picker-item:first-child', title: '居左对齐' },
        { Choice: ' .ql-align .ql-picker-item[data-value="center"]', title: '居中对齐' },
        { Choice: ' .ql-align .ql-picker-item[data-value="right"]', title: '居右对齐' },
        { Choice: ' .ql-align .ql-picker-item[data-value="justify"]', title: '两端对齐' }
    ]
    // 注册图片上传模块
    Quill.register('modules/imageUploader', ImageUploader)

    // 上传API
    const uploadFileAPI = async file => {
        const data = new FormData()
        data.append('file', file)

        return post('/file-storage/api/v1/file/upload', data)
            .then(({ data: { fullUrl } }) => {
                return { data: { fullUrl } }
            })
            .catch(error => {
                console.error('上传图片出错:', error)
                throw error // 抛出错误以供外部处理
            })
    }

    // 将本地文件转换为URL
    const getLocalImageURL = file => {
        return new Promise(resolve => {
            const reader = new FileReader()
            reader.onload = e => {
                resolve(e.target.result)
            }
            reader.readAsDataURL(file)
        })
    }

    // Quill 编辑器选项
    const editorOption = ref({
        modules: {
            // imageUploader: {
            //     upload: async file => {
            //         const localUrl = await getLocalImageURL(file)
            //         return localUrl // 返回本地图片的 URL 进行预览
            //     }
            // },
            toolbar: [
                // [{ font: Font.whitelist }], // 字体
                ['bold', 'italic', 'underline', 'strike'], // 加粗，斜体，下划线，删除线
                ['blockquote', 'code-block'], // 引用，代码块
                [{ header: 1 }, { header: 2 }], // 标题1，标题2
                [{ list: 'ordered' }, { list: 'bullet' }], // 有序列表，无序列表
                // [{ script: 'sub' }, { script: 'super' }], // 上标，下标
                // [{ indent: '-1' }, { indent: '+1' }], // 缩进
                // [{ direction: 'rtl' }], // 文字方向
                [{ size: ['small', false, 'large', 'huge'] }], // 文字大小
                // [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题大小
                [{ color: [] }, { background: [] }], // 字体颜色，背景颜色
                [{ align: [] }], // 对齐
                ['clean'], // 清除格式
                ['image'] // 链接，图片，视频
            ]
        }
    })
    const quillEditor = ref(null) // 引用QuillEditor组件
    const sonRef = ref(null)
    // 提交表单的方法
    async function submit() {
      state.sonLoading = true
        sonRef.value.validate().then(async () => {
            const deltaContent = quillEditor.value.getContents()
          const imageUploadPromises = []

          deltaContent.ops.forEach(op => {
            if (op.insert && op.insert.image && op.insert.image.startsWith('data:')) {
              const localSrc = op.insert.image

              // 如果是 base64 图片，上传并替换为 URL
              const file = dataURLtoFile(localSrc, 'image.png') // 将 base64 转换为 File 对象

              const uploadPromise = uploadFileAPI(file).then(({ data: { fullUrl } }) => {
                // 替换 op 中的 base64 URL 为服务器返回的 URL
                op.insert.image = fullUrl
              })

              imageUploadPromises.push(uploadPromise)
            }
          })

            try {
                await Promise.all(imageUploadPromises)

              if (currentData.value.id) {
                // 编辑保存逻辑
                const params = { ...state.modalForm }
                params.description = JSON.stringify(deltaContent)
                put('/solution-ppm/api/v2/built-in-system-ppm/work_order', params)
                  .then(data => {
                    if (data.code !== 200) {
                      message.error(data.message)
                      return
                    }
                    message.success(data.message)
                    resetFather()
                    state.editSonVisible = false
                    getData()
                  })
                  .finally(() => {
                    state.sonLoading = false
                  })
              } else {
                // 新建保存逻辑
                const params = { ...state.modalForm }
                params.description = JSON.stringify(deltaContent)
                post('/solution-ppm/api/v2/built-in-system-ppm/work_order', params)
                  .then(data => {
                    if (data.code !== 200) {
                      message.error(data.message)
                      return
                    }
                    message.success(data.message)
                    resetFather()
                    state.editSonVisible = false
                    getData()
                  })
                  .finally(() => {
                    state.sonLoading = false
                  })
              }
            } catch (error) {
              state.sonLoading = false
                console.error('图片上传失败', error)
                return // 终止提交
            }


        })
    }

    // 将 dataURL 转换为 File 对象的辅助函数
    const dataURLtoFile = (dataurl, filename) => {
        const arr = dataurl.split(',')
        const mime = arr[0].match(/:(.*?);/)[1]
        const bstr = atob(arr[1])
        let n = bstr.length
        const u8arr = new Uint8Array(n)
        while (n--) {
            u8arr[n] = bstr.charCodeAt(n)
        }
        return new File([u8arr], filename, { type: mime })
    }
    const currentData = ref({})
    function initTitle() {
        document.getElementsByClassName('ql-editor')[0].dataset.placeholder = ''
        for (let item of titleConfig) {
            let tip = document.querySelector('.ql-toolbar' + item.Choice)
            if (!tip) continue
            tip.setAttribute('title', item.title)
        }
    }
    //     富文本设置
    const state = reactive({
        detailId: undefined,
        dataList: [],
        fileVisible: false,
        fileDetailVisible: false,
        addRemarkVisible: false,
        backRemarkVisible: false,
        remarkTitle: '',
        remarkMsg: '',
        remarkVisible: false,
        remarkList: [],
        changeStatusVisible: false,
        modalForm: {
            parentId: undefined,
            content: undefined,
            type: undefined,
            priority: undefined,
            questionSource: undefined,
            workHours: undefined,
            endTime: undefined,
            areaCode: undefined,
            projectId: undefined,
            milepostId: undefined,
            customer: undefined,
            production: undefined,
            environment: undefined,
            description: undefined,
            solverList: [],
            descriptionAttachmentList: [],
            quillData: ''
        },
        tableData: [],
        allUser: [],
        editSonVisible: false,
        modalTitle: '',
        gdDetail: {},
        changeStatusForm: {
            status: undefined,
            reason: '',
            attachmentList: [],
            workOrderId: undefined,
            solution: undefined
        },
        sonLoading: false,
        remarkLoading: false,
        detailDescription: {},
        changeStausList: [
            {
                label: '正在处理',
                value: '正在处理'
            },
            {
                label: '已解决',
                value: '已解决'
            },
            {
                label: '无需解决',
                value: '无需解决'
            },
            {
                label: '申请流转',
                value: '申请流转'
            }
        ],
        deleteVisible: false,
        detailVisible: false,
        detailTitle: '',
        //   是否是回复父亲备注
        previewImage: '',
        previewVisible: false
    })
    const columns = [
        {
            title: '变更模块',
            dataIndex: 'classify',
            align: 'center',
            ellipsis: true
        },
        {
            title: '工单标题',
            dataIndex: 'content',
            align: 'center',
            ellipsis: true
        },
        {
            title: '变更属性',
            dataIndex: 'changeFieldName',
            align: 'center',
            ellipsis: true
        },
        {
            title: '变更前',
            dataIndex: 'beforeChange',
            align: 'center',
            ellipsis: true
        },
        {
            title: '变更后',
            dataIndex: 'afterChange',
            align: 'center',
            ellipsis: true
        },
        {
            title: '验证状态',
            dataIndex: 'approveStatus',
            align: 'center',
            width: 100,
            ellipsis: true
        },
        {
            title: '审批人',
            dataIndex: 'approveUser',
            align: 'center',
            width: 120,
            ellipsis: true
        },
        {
            title: '提交人',
            dataIndex: 'submitter',
            align: 'center',
            width: 120,
            ellipsis: true
        },
        {
            title: '提交时间',
            dataIndex: 'submissionTime',
            align: 'center',
            width: 180,
            ellipsis: true
        }
    ]
    // 跳子详情
    function handleSonDetail(id) {
        // router.push(
        //     `${import.meta.env.VITE_PUBLIC_PATH}/page/3000000787?id=${id}&url=3000000785&lastId=${state.detailId}`
        // )
      window.open(`${import.meta.env.VITE_PUBLIC_PATH}/page/3000000787?id=${id}&url=3000000785&lastId=${state.detailId}`, '_blank');
    }
    const rootDetailMsg = ref()
    function getData() {
        pageLoading.loading = true
        get(`/solution-ppm/api/v2/built-in-system-ppm/work_order/details/${state.detailId}`)
            .then(async data => {
                if (data.code !== 200) {
                    message.error(data.message)
                    return
                }

                state.gdDetail = data.data
                rootState.rootCauseFlag = data.data.workOrderDto.rootCauseFlag
                try {
                    state.detailDescription = data.data.workOrderDto.description
                } catch (e) {
                    console.warn('description 解析失败', e)
                }

                try {
                    const solutionDetail = JSON.parse(data.data.workOrderDto.solutionDetail)
                    const rootDetail = JSON.parse(data.data.workOrderDto.rootCauseAnalysis)

                    // 即使第一个报错也不影响第二个执行
                    try {
                        solutionQuillEditor.value.setContents(solutionDetail)
                    } catch (e) {
                        console.warn('设置 solutionQuillEditor 报错:', e)
                    }

                    try {
                        rootQuillEditor.value.setContents(rootDetail)
                        rootDetailMsg.value = data.data.workOrderDto.rootCauseAnalysis
                    } catch (e) {
                        console.warn('设置 rootQuillEditor 报错:', e)
                    }
                } catch (e) {
                    console.warn('solutionDetail 解析失败', e)
                }
                newState.solution = data.data.workOrderDto.solution
                state.tableData = data.data.workOrderOperateLogList
                newState.descriptionFileList = data.data.workOrderDto.descriptionAttachmentList
                newState.solveFileList = data.data.workOrderDto.attachmentList
                rootState.rootCauseClassify = data.data.workOrderDto.rootCauseClassify||undefined
                rootState.responsibleParty = data.data.workOrderDto.responsibleParty||undefined
                rootState.businessType = data.data.workOrderDto.businessType||undefined
                await getResponsiblePartyList()
                await getBusinessTypeList()
                await getRootCauseClassifyList()

            })
            .finally(() => {
                pageLoading.loading = false
            })
    }

    const taskPeopleList = ref([])
    function handlerAddPeople(name) {
        if (state.modalForm.solverList.indexOf(name) !== -1) {
            state.modalForm.solverList = state.modalForm.solverList.filter(item => item !== name)
        } else {
            state.modalForm.solverList[0] = name
        }
    }
    function getAllUser() {
        get('/solution-ppm/api/v2/built-in-system-ppm/pmgf/get/allUser').then(data => {
            if (data.code !== 200) {
                message.error(data.message)
                return
            }
            state.allUser = data.data.userDtoList
        })
    }
    function getClassfy(){
        get('/solution-ppm/api/v2/built-in-system-ppm/dictionary/search/GD.GYGL').then(data=>{
            rootState.tagList = data.data.map(item=>({
                label:item.itemName,
                value:item.itemName
            }))
        })
    }
    function handleAdd() {
        if (!['未开始', '解决中'].includes(state.gdDetail.workOrderDto.status) || state.gdDetail.workOrderDto.tag === 1) {
            message.info('请将父工单状态变更为解决中或未开始后重试');
            return;
        }


        resetCurrentData()
        getAllUser()
        state.modalTitle = '新建子工单'
        state.modalForm.solverList = state.gdDetail?.workOrderDto.solverList
        state.editSonVisible = true
        quillEditor.value.setContents('')
        state.modalForm.parentId = state.detailId
        nextTick(() => {
            initTitle()
        })
    }
    function resetFather() {
        state.modalForm = {
            content: undefined,
            type: undefined,
            priority: undefined,
            questionSource: undefined,
            workHours: undefined,
            endTime: undefined,
            areaCode: undefined,
            projectId: undefined,
            milepostId: undefined,
            customer: undefined,
            production: undefined,
            environment: undefined,
            description: undefined,
            solverList: [],
            descriptionAttachmentList: []
        }
    }
    function resetGdQuill() {
        quillEditor.value.setContents({})
    }
    //     查看附件
    function showFile(record) {
        resetCurrentData()
        currentData.value = record
        state.fileVisible = true
    }
    // 父上传文件
    function handlerFatherUpload(file) {
      state.sonLoading = true
        const data = new FormData()
        data.append('file', file)

        post('/file-storage/api/v1/file/upload', data)
            .then(({ data: { fullUrl } }) => {
                if (data) {
                    // 新文件对象
                    const newFile = {
                        uid: file.uid,
                        lastModified: file.lastModified,
                        name: file.name,
                        size: file.size,
                        type: file.type,
                        status: 'done',
                        url: fullUrl
                    }

                    // 去重，保留一个副本
                    state.modalForm.descriptionAttachmentList = [
                        // 保留已存在文件（去除重复）
                        ...state.modalForm.descriptionAttachmentList.filter(
                            item => item.uid !== file.uid && item.name !== file.name
                        ),
                        // 添加新的文件
                        newFile
                    ]
                }
              state.sonLoading = false
            })
            .catch(e => {
                message.error('上传失败' + e)
            })

        return false
    }
    // 父移除文件
    function handlerFatherRemove(file) {
        state.modalForm.descriptionAttachmentList = state.modalForm.descriptionAttachmentList.filter(
            item => item.uid !== file.uid
        )
    }
    // 父上传文件
    function resetCurrentData() {
        currentData.value = {}
        currentRemark.value = {}
    }
    const changeRef = ref(null)

    function resetSonForm() {
        state.editSonVisible = false
        state.modalForm = {
            content: undefined,
            type: undefined,
            priority: undefined,
            questionSource: undefined,
            workHours: undefined,
            endTime: undefined,
            areaCode: undefined,
            projectId: undefined,
            milepostId: undefined,
            customer: undefined,
            production: undefined,
            environment: undefined,
            description: undefined,
            solverList: [],
            descriptionAttachmentList: []
        }
    }
    function resetChangeForm() {
        state.changeStatusForm = {
            status: undefined,
            reason: '',
            attachmentList: [],
            workOrderId: undefined,
            solution: undefined
        }
    }
    function statusChange() {
        state.changeStatusForm.attachmentList = []
        state.changeStatusForm.reason = undefined
        state.changeStatusForm.solution = undefined
    }
    //     子工单编辑
    function handleEdit(record) {
        state.modalTitle = '编辑子工单'
        resetCurrentData()
        currentData.value = record
        state.editSonVisible = true
        Object.assign(state.modalForm, record)
        nextTick(() => {
            get(`/solution-ppm/api/v2/built-in-system-ppm/work_order/details/${record.id}`).then(data => {
                let descriptionData = JSON.parse(data.data.workOrderDto.description)
                quillEditor.value.setContents(descriptionData)
                state.modalForm.description = descriptionData
            })
        })
    }
    function handleAddRemark() {
      if(state.gdDetail.workOrderDto.status==='已关闭'||state.gdDetail.workOrderDto.status==='已回访'){
        message.info('请将父工单状态变更为解决中后重试')
        return
      }
        resetCurrentData()
        state.addRemarkVisible = true
        state.remarkTitle = '新建备注'
        nextTick(() => {
            remarkQuillRef.value.setContents('')
        })
    }
    const remarkQuillRef = ref(null)
    async function confirmRemark() {
      state.remarkLoading = true
      const deltaContent = remarkQuillRef.value.getContents()
        const htmlContent = remarkQuillRef.value.getHTML() // 获取 HTML 内容
      const imageUploadPromises = []

      deltaContent.ops.forEach(op => {
        if (op.insert && op.insert.image && op.insert.image.startsWith('data:')) {
          const localSrc = op.insert.image

          // 如果是 base64 图片，上传并替换为 URL
          const file = dataURLtoFile(localSrc, 'image.png') // 将 base64 转换为 File 对象

          const uploadPromise = uploadFileAPI(file).then(({ data: { fullUrl } }) => {
            // 替换 op 中的 base64 URL 为服务器返回的 URL
            op.insert.image = fullUrl
          })

          imageUploadPromises.push(uploadPromise)
        }
      })

        try {
            await Promise.all(imageUploadPromises)

          if (currentRemark.value.id) {
            const params = {
              id: currentRemark.value.id,
              content: JSON.stringify(deltaContent),
              'parentId': currentRemark.value.parentId
            }
            put('/solution-ppm/api/v2/built-in-system-ppm/work_order/remark', params)
              .then(data => {
                if (data.code !== 200) {
                  message.error(data.message)
                  return
                }
                message.success(data.message)
                state.addRemarkVisible = false
                getData()
              })
              .finally(() => {
                state.remarkLoading = false
              })
          } else {
            const params = {
              'workOrderId': state.detailId,
              'content': JSON.stringify(deltaContent)
            }
            post('/solution-ppm/api/v2/built-in-system-ppm/work_order/remark', params)
              .then(data => {
                if (data.code !== 200) {
                  message.error(data.message)
                  return
                }
                message.success(data.message)
                state.addRemarkVisible = false
                getData()
              })
              .finally(() => {
                state.remarkLoading = false
              })
          }
        } catch (error) {
          state.remarkLoading = false
            console.error('图片上传失败', error)
            return // 终止提交
        }


    }
    // function getHtmlContent(delta) {
    //     const quill = new Quill(document.createElement('div'))
    //     quill.setContents(JSON.parse(delta))
    //     return quill.root.innerHTML
    // }
    function getHtmlContent(input) {
        console.log(input);
        // 防御性处理：避免 null 或 undefined
        if (!input) return ''

        // 尝试解析为富文本 Delta 格式
        let deltaObj = null
        try {
            const parsed = typeof input === 'string' ? JSON.parse(input) : input
            if (parsed?.ops && Array.isArray(parsed.ops)) {
                deltaObj = parsed
            }
        } catch (e) {
            // 解析失败，说明不是 JSON 或不是 Delta 格式，走普通字符串逻辑
        }

        // 如果是富文本格式
        if (deltaObj) {
            try {
                const tempEl = document.createElement('div')
                const quill = new Quill(tempEl)
                quill.setContents(deltaObj)
                return quill.root.innerHTML
            } catch (err) {
                console.error('富文本渲染失败', err)
                return '' // 保险起见返回空
            }
        }

        // 否则是普通文本，做一下换行处理
        return String(input).replace(/\n/g, '<br/>')
    }

    const currentRemark = ref({})
    const backRemarkQuillRef = ref(null)
    function resetBack() {
        currentRemark.value = {}
    }
    function feedBackRemark(record) {
        resetBack()
        currentRemark.value = record
        state.backRemarkVisible = true
        nextTick(() => {
            backRemarkQuillRef.value.setContents('')
        })
    }
    // 确认回复
    async function confirmBackRemark() {
        state.remarkLoading = true
      const deltaContent = backRemarkQuillRef.value.getContents()
      const imageUploadPromises = []

      deltaContent.ops.forEach(op => {
        if (op.insert && op.insert.image && op.insert.image.startsWith('data:')) {
          const localSrc = op.insert.image

          // 如果是 base64 图片，上传并替换为 URL
          const file = dataURLtoFile(localSrc, 'image.png') // 将 base64 转换为 File 对象

          const uploadPromise = uploadFileAPI(file).then(({ data: { fullUrl } }) => {
            // 替换 op 中的 base64 URL 为服务器返回的 URL
            op.insert.image = fullUrl
          })

          imageUploadPromises.push(uploadPromise)
        }
      })

        try {
            await Promise.all(imageUploadPromises)
          const params = {
            workOrderId: state.detailId,
            content: JSON.stringify(backRemarkQuillRef.value.getContents()),
            parentId: currentRemark.value.id
          }
          post('/solution-ppm/api/v2/built-in-system-ppm/work_order/remark/feedback', params)
            .then(data => {
              if (data.code !== 200) {
                message.error(data.message)
                return
              }
              message.success(data.message)
              state.backRemarkVisible = false
              getData()
            })
            .finally(() => {
              state.remarkLoading = false
            })
        } catch (error) {
          state.remarkLoading = false
            console.error('图片上传失败', error)
            return // 终止提交
        }


    }
    //     编辑备注
    function editRemark(record) {
        resetBack()
        currentRemark.value = record
        state.remarkTitle = '编辑备注'
        state.addRemarkVisible = true
        nextTick(() => {
            let descriptionData = JSON.parse(record.content)
            remarkQuillRef.value.setContents(descriptionData)
        })
    }
    function handlerDeleteRemark(record) {
        del(`/solution-ppm/api/v2/built-in-system-ppm/work_order/remark/${record.id}`).then(data => {
            if (data.code !== 200) {
                message.error(data.message)
                return
            }
            message.success(data.message)
            getData()
        })
    }
    function handlerDeleteFeedBack(record) {
        del(`/solution-ppm/api/v2/built-in-system-ppm/work_order/remark/feedback/${record.id}`).then(data => {
            if (data.code !== 200) {
                message.error(data.message)
                return
            }
            message.success(data.message)
            getData()
        })
    }
    function handleDelete() {
        deleteRef.value.validate().then(()=>{
            state.deleteLoading = true
            del(`/solution-ppm/api/v2/built-in-system-ppm/work_order/${currentData.value.id}`)
                .then(data => {
                    if (data.code !== 200) {
                        message.error(data.message)
                        return
                    }
                    message.success(data.message)
                    state.deleteVisible = false
                    getData()
                })
                .finally(() => {
                    state.deleteLoading = false
                })
        })

    }
    function handlerDownload(item) {
        pageLoading.loading = true
        pageLoading.tip = '文件下载中...'
        fetch(item.url)
            .then(response => response.blob())
            .then(blob => {
                const downloadLink = document.createElement('a')
                const url = URL.createObjectURL(blob)
                downloadLink.href = url
                downloadLink.setAttribute('download', item.name)
                downloadLink.style.display = 'none'
                document.body.appendChild(downloadLink)
                downloadLink.click()
                document.body.removeChild(downloadLink)

                // Release the object URL after the download
                URL.revokeObjectURL(url)
                pageLoading.loading = false
            })
            .catch(err => {
                console.error('Download failed', err)
            })
    }
    function toDelete(record) {
        resetCurrentData()
        currentData.value = record
        state.deleteVisible = true
    }
    //     预览图片
    function previewAttachment(item) {
        // 检查附件类型
        if (item.type.startsWith('image')) {
            state.previewImage = item.url // 设置预览图片的URL
            state.previewVisible = true // 显示模态框
        } else {
            // state.isImagePreview = false;
            // // 如果是其他类型的文件，直接在模态框中显示
            // state.previewFileUrl = item.url; // 设置预览文件的URL
            message.info('目前仅支持图片预览')
        }
    }
    function handlepreviewCancel() {
        state.previewVisible = false
    }
    //     新需求
    const newState = reactive({
        descriptionFileList: [],
        solveFileList: [],
    //   解决方案概述
      solution: '',
      changeStatusLoading: false,
      isExpandAll: false,
      circulationVisible: false,
      resolvingVisible: false,
      resolvedVisible: false,
      circulationForm: {
        solverList: [],
        status: '未开始'
      },
      resolvingForm: {
        solution: '',
        status: '解决中',
        solutionDetail: ''
      },
      resolvedForm: {
        solution: '',
        attachmentList: [],
        status: '已解决',
        solutionDetail: ''
      },
      closeForm: {
        status: '关闭'
      },
      workOrderId: undefined,
      saveLoading: false,
    })
    const circulationFormRef = ref(null)
    const resolvingFormRef = ref(null)
    const resolvedFormRef = ref(null)
    const resolvingQuillRef = ref(null)
    const resolvedQuillRef = ref(null)
    const solutionQuillEditor = ref(null)
    function handlerDescriptionUpload(file) {
      if(state.gdDetail.workOrderDto.status==='已关闭'||state.gdDetail.workOrderDto.status==='已回访'){
message.info('请将父工单状态变更为解决中后重试')
        getData()
        return false
      }
        const data = new FormData()
        data.append('file', file)

        post('/file-storage/api/v1/file/upload', data)
            .then(({ data: { fullUrl } }) => {
                if (data) {
                    // 新文件对象
                    const newFile = {
                        uid: file.uid,
                        lastModified: file.lastModified,
                        name: file.name,
                        size: file.size,
                        type: file.type,
                        status: 'done',
                        url: fullUrl
                    }

                    // 去重，保留一个副本
                    newState.descriptionFileList = [
                        // 保留已存在文件（去除重复）
                        ...newState.descriptionFileList.filter(
                            item => item.uid !== file.uid && item.name !== file.name
                        ),
                        // 添加新的文件
                        newFile
                    ]
                  saveRoot()
                }
            })
            .catch(e => {
                message.error('上传失败' + e)
            })

        return false
    }
    function handlerDescriptionRemove(file) {
      if(state.gdDetail.workOrderDto.status==='已关闭'||state.gdDetail.workOrderDto.status==='已回访'){
        message.info('请将父工单状态变更为解决中后重试')
        getData()
        return false
      }
        newState.descriptionFileList = newState.descriptionFileList.filter(item => item.uid !== file.uid)
      saveRoot()
    }
    // 解决证明附件
    function handlerSolveUpload(file) {
      if(state.gdDetail.workOrderDto.status==='已关闭'||state.gdDetail.workOrderDto.status==='已回访'){
        message.info('请将父工单状态变更为解决中后重试')
        getData()
        return false
      }
      const data = new FormData()
      data.append('file', file)

      post('/file-storage/api/v1/file/upload', data)
        .then(({ data: { fullUrl } }) => {
          if (data) {
            // 新文件对象
            const newFile = {
              uid: file.uid,
              lastModified: file.lastModified,
              name: file.name,
              size: file.size,
              type: file.type,
              status: 'done',
              url: fullUrl
            }

            // 去重，保留一个副本
            newState.solveFileList = [
              // 保留已存在文件（去除重复）
              ...newState.solveFileList.filter(
                item => item.uid !== file.uid && item.name !== file.name
              ),
              // 添加新的文件
              newFile
            ]
            saveRoot()
          }
        })
        .catch(e => {
          message.error('上传失败' + e)
        })

      return false
    }
    function handlerSolveRemove(file) {
      newState.solveFileList = newState.solveFileList.filter(item => item.uid !== file.uid)
      saveRoot()
    }
    // 判断按钮是否可用的计算属性
    function isCirculationDisabled(item) {
        if (item.tag === 1) return true // 如果 tag 是 1，直接禁用按钮
        return !(
            (
                (item.status === '未开始' && item.solvers) || // 未开始且有solvers
                (item.status === '解决中' && item.solvers) || // 解决中且有solvers
                (item.status === '待分发' && item.distributed) ||
                item.tag === 1
            ) // 待分发且distributed为true
        )
    }

    function isResolvingDisabled(item) {
        return !(
            (item.status === '未开始' && item.solvers)
        )
    }
    function isNoNeedSolveDisabled(item) {
      return !((item.status === '未开始' && item.solvers) || (item.status === '解决中' && item.solvers))
      // !(item.status === '未开始' && item.solvers) || !(item.status === '解决中' && item.solvers)
    }
    // function isCloseDisabled(item) {
    //   return (
    //     !((item.status === '未开始' && item.solvers) || (item.status === '未开始' && item.myCreated)) &&
    //     !(item.status === '解决中' && item.solvers) &&
    //     !(item.status === '已解决' && item.myCreated) &&
    //     !(item.status === '待分发' && item.distributed)
    //   ) // 创建人或PMO关闭
    // }
    function isCloseDisabled(item) {
        return (
            !(item.status === '已解决' && (item.myCreated || item.pmoOrNot)) &&
            !(item.status === '无需解决' && (item.myCreated || item.pmoOrNot))
        ) // 创建人或PMO关闭
    }
    // function isResolvedDisabled(item) {
    //   return (
    //     !(item.status === '未开始' && item.solvers) && // 解决人解决中
    //     !(item.status === '解决中' && item.solvers)
    //   )
    // }
    function isResolvedDisabled(item) {
        return (
            // !(item.status === '未开始' && item.solvers) && // 解决人解决中
            !(item.status === '解决中' && item.solvers)
        )
    }
    // 流转处理
    function confirmCirculation() {
      circulationFormRef.value.validate().then(() => {
        newState.changeStatusLoading = true
        newState.circulationForm.workOrderId = newState.workOrderId
        put('/solution-ppm/api/v2/built-in-system-ppm/work_order/status_change', newState.circulationForm)
          .then(data => {
            if (data.code !== 200) {
              message.error(data.message)
              return
            }
            message.success(data.message)
            cancelCirculation()
            getData()
          })
          .finally(() => {
            newState.changeStatusLoading = false
            cancelCirculation()
          })
      })
    }
    function cancelCirculation() {
      newState.circulationVisible = false
      newState.circulationForm = {
        solverList: []
      }
    }
    const currentResolvingData = ref({})
    function showResolving(record) {
      if (record.tag === 1 && !record.parentId) {
        get(`/solution-ppm/api/v2/built-in-system-ppm/work_order/${record.id}/sop/steps`).then(data => {
          if (data.code !== 200) {
            message.error(data.message)
            return
          }
          newSopState.sopTableData = groupSopData(data.data).map(item => {
            return {
              ...item,
              disabled: !item.canCreated
            }
          })
        })
      } else {
        newSopState.sopTableData = []
      }
      newSopState.selectedRowKeys = []
      currentResolvingData.value = record
      newState.workOrderId = record.id
      newState.resolvingVisible = true

      // ===============================================================================================
      // newState.workOrderId = record.id
      // get(`/solution-ppm/api/v2/built-in-system-ppm/work_order/details/${newState.workOrderId}`).then(data => {
      //   if (data.code !== 200) {
      //     message.error(data.message)
      //     return
      //   }
      //   newState.resolvingVisible = true
      //   nextTick(() => {
      //     let solutionDetail = JSON.parse(data.data.workOrderDto.solutionDetail)
      //     newState.resolvingForm.solution = data.data.workOrderDto.solution
      //     resolvingQuillRef.value.setContents(solutionDetail)
      //   })
      // })
    }
    function cancelResolving() {
      newState.resolvingVisible = false
    }
    const onSopSelectChange = selectedRowKeys => {
      console.log(selectedRowKeys, 'selectedRowKeys')
      newSopState.selectedRowKeys = selectedRowKeys
    }
    async function confirmResolving() {
      newState.changeStatusLoading = true
      try {
        const selectedSopList = newSopState.sopTableData.filter(item =>
          newSopState.selectedRowKeys.includes(item.sopStepId)
        )
        newState.resolvingForm.workOrderId = currentResolvingData.value.id
        const params = {
          attachmentList: newSopState.sopFileList,
          children: selectedSopList,
          parentId: state.detailId,
          endTime: currentResolvingData.value.endTime,
          monitorScene: currentResolvingData.value.monitorScene
        }

        // 只有当 tag === 1 时，才先执行 createSopChildren
        if (currentResolvingData.value.tag === 1) {
          const createRes = await post(
            '/solution-ppm/api/v2/built-in-system-ppm/work_order/createSopChildren',
            params
          )
          if (createRes.code !== 200) {
            message.error(createRes.message)
            return
          }
        }

        // 调用 status_change 接口
        const statusChangeRes = await put(
          '/solution-ppm/api/v2/built-in-system-ppm/work_order/status_change',
          newState.resolvingForm
        )
        if (statusChangeRes.code !== 200) {
          message.error(statusChangeRes.message)
          return
        }

        message.success(statusChangeRes.message)
        cancelResolving()
        resetNewState()
        getData()
      } catch (error) {
        message.error('操作失败，请重试')
        console.error('错误详情:', error)
      } finally {
        newState.changeStatusLoading = false
      }
    }
    function resetNewState() {
      newSopState.sopTableData = []
      newSopState.selectedRowKeys = []
      newSopState.sopFileList = []
    }
    // 解决中处理
    // function confirmResolving() {
    //   resolvingFormRef.value.validate().then(async () => {
    //     const deltaContent = resolvingQuillRef.value.getContents()
    //
    //     const imageUploadPromises = []
    //
    //     deltaContent.ops.forEach(op => {
    //       if (op.insert && op.insert.image && op.insert.image.startsWith('data:')) {
    //         const localSrc = op.insert.image
    //
    //         // 如果是 base64 图片，上传并替换为 URL
    //         const file = dataURLtoFile(localSrc, 'image.png') // 将 base64 转换为 File 对象
    //
    //         const uploadPromise = uploadFileAPI(file).then(({ data: { fullUrl } }) => {
    //           // 替换 op 中的 base64 URL 为服务器返回的 URL
    //           op.insert.image = fullUrl
    //         })
    //
    //         imageUploadPromises.push(uploadPromise)
    //       }
    //     })
    //
    //     try {
    //       await Promise.all(imageUploadPromises)
    //
    //       newState.changeStatusLoading = true
    //       newState.resolvingForm.workOrderId = newState.workOrderId
    //       newState.resolvingForm.solutionDetail = JSON.stringify(deltaContent)
    //       put('/solution-ppm/api/v2/built-in-system-ppm/work_order/status_change', newState.resolvingForm)
    //         .then(data => {
    //           if (data.code !== 200) {
    //             message.error(data.message)
    //             return
    //           }
    //           message.success(data.message)
    //           cancelResolving()
    //           getData()
    //         })
    //         .finally(() => {
    //           cancelResolving()
    //           newState.changeStatusLoading = false
    //         })
    //     } catch (error) {
    //       console.error('图片上传失败', error)
    //       return // 终止提交
    //     }
    //   })
    // }

    // 已解决处理
    // function confirmResolved() {
    //   resolvedFormRef.value.validate().then(async () => {
    //     newState.changeStatusLoading = true
    //     const deltaContent = resolvedQuillRef.value.getContents()
    //
    //     const imageUploadPromises = []
    //
    //     deltaContent.ops.forEach(op => {
    //       if (op.insert && op.insert.image && op.insert.image.startsWith('data:')) {
    //         const localSrc = op.insert.image
    //
    //         // 如果是 base64 图片，上传并替换为 URL
    //         const file = dataURLtoFile(localSrc, 'image.png') // 将 base64 转换为 File 对象
    //
    //         const uploadPromise = uploadFileAPI(file).then(({ data: { fullUrl } }) => {
    //           // 替换 op 中的 base64 URL 为服务器返回的 URL
    //           op.insert.image = fullUrl
    //         })
    //
    //         imageUploadPromises.push(uploadPromise)
    //       }
    //     })
    //
    //     try {
    //       await Promise.all(imageUploadPromises)
    //
    //
    //       newState.resolvedForm.workOrderId = newState.workOrderId
    //       newState.resolvedForm.status = '已解决'
    //       newState.resolvedForm.solutionDetail = JSON.stringify(deltaContent)
    //       put('/solution-ppm/api/v2/built-in-system-ppm/work_order/status_change', newState.resolvedForm)
    //         .then(data => {
    //           if (data.code !== 200) {
    //             message.error(data.message)
    //             return
    //           }
    //           message.success(data.message)
    //           cancelResolved()
    //           getData()
    //         })
    //         .finally(() => {
    //           newState.changeStatusLoading = false
    //           cancelResolved()
    //         })
    //     } catch (error) {
    //       newState.changeStatusLoading = false
    //       console.error('图片上传失败', error)
    //       return // 终止提交
    //     }
    //   })
    // }
    const deltaData = ref(null)
    async function confirmResolved() {
      console.log(resolvedData.value)
      newState.changeStatusLoading = true
      try {
        await resolvedFormRef.value.validate().catch(errors => {
          console.error('表单校验失败:', errors)
          message.error('请检查表单填写是否正确') // 显示错误提示
          throw new Error('表单校验未通过') // 抛出错误阻止后续代码执行
        })

        const deltaContent = resolvedQuillRef.value.getContents()
          deltaData.value = deltaContent // 保存一份 delta 数据
        const imageUploadPromises = []

        deltaContent.ops.forEach(op => {
          if (op.insert && op.insert.image && op.insert.image.startsWith('data:')) {
            const localSrc = op.insert.image
            const file = dataURLtoFile(localSrc, 'image.png')

            const uploadPromise = uploadFileAPI(file).then(({ data: { fullUrl } }) => {
              op.insert.image = fullUrl
            })

            imageUploadPromises.push(uploadPromise)
          }
        })

        // **确保所有图片上传完成**
        await Promise.all(imageUploadPromises)

        // **构造请求参数**
        newState.resolvedForm.workOrderId = resolvedData.value.id
        newState.resolvedForm.status = '已解决'
        // newState.resolvedForm.solutionDetail = JSON.stringify(deltaContent)
        // console.log(newState.resolvedForm.solutionDetail)
        // **如果 tag === 1，先调 createSopChildren**
        if (resolvedData.value.tag === 1) {
          const params = {
            attachmentList: newSopState.sopFileList,
            children: newSopState.sopTableData.filter(item =>
              newSopState.selectedRowKeys.includes(item.sopStepId)
            ),
            parentId: state.detailId,
            endTime: resolvedData.value.endTime,
            monitorScene: resolvedData.value.monitorScene
          }

          const createSopResponse = await post(
            '/solution-ppm/api/v2/built-in-system-ppm/work_order/createSopChildren',
            params
          )
          if (createSopResponse.code !== 200) {
            message.error(createSopResponse.message)
            return
          }
          newState.resolvedForm.solutionDetail = JSON.stringify(deltaContent)
        }

        // **执行状态变更**
          const payload = {
              ...newState.resolvedForm,
              solutionDetail: JSON.stringify(deltaData.value) // 仅提交结构化数据
          }
        const statusChangeResponse = await put(
          '/solution-ppm/api/v2/built-in-system-ppm/work_order/status_change',
            payload
        )
        if (statusChangeResponse.code !== 200) {
          message.error(statusChangeResponse.message)
          return
        }

        // **成功后执行后续操作**
        message.success(statusChangeResponse.message)
        cancelResolved()
        getData()
      } catch (error) {
        // console.error('处理失败:', error)
        // message.error('提交失败，请重试')
      } finally {
        newState.changeStatusLoading = false
      }
    }
    function cancelResolved() {
      newState.resolvedVisible = false
    }
    function showCirculation(record) {
      newState.circulationVisible = true
      newState.workOrderId = record.id
    }

    // function showResolved(record) {
    //   newState.resolvedVisible = true
    //   newState.workOrderId = record.id
    //   get(`/solution-ppm/api/v2/built-in-system-ppm/work_order/details/${newState.workOrderId}`).then(data => {
    //     if (data.code !== 200) {
    //       message.error(data.message)
    //       return
    //     }
    //     nextTick(() => {
    //       let solutionDetail = JSON.parse(data.data.workOrderDto.solutionDetail)
    //       newState.resolvedForm.solution = data.data.workOrderDto.solution
    //       newState.resolvedForm.attachmentList = data.data.workOrderDto.attachmentList
    //       resolvedQuillRef.value.setContents(solutionDetail)
    //     })
    //   })
    // }
    const sonState = reactive({
      modalTitle: '',
      noNeedVisible: false,
      noNeedLoading: false,
      noNeedRemark: undefined,
      deleteVisible: false,
      deleteRemark: undefined,
      deleteLoading: false
    })
    const noNeedData = ref({})
    function showNoNeed(item) {
      if (item.tag === 1) {
        get(`/solution-ppm/api/v2/built-in-system-ppm/work_order/${item.id}/sop/steps`).then(data => {
          if (data.code !== 200) {
            message.error(data.message)
            return
          }
          newSopState.sopTableData = groupSopData(data.data.filter(item => item.canCreated))
        })
      } else {
        newSopState.sopTableData = []
      }
      newSopState.selectedRowKeys = []
        sonState.noNeedRemark = item.remark
      noNeedData.value = item
      sonState.noNeedVisible = true
    }
    async function submitNoNeed() {
        sonState.noNeedLoading = true
        try {
            await noNeedRef.value.validate()
            const selectedSopList = newSopState.sopTableData.filter(item =>
                newSopState.selectedRowKeys.includes(item.sopStepId)
            )
            const params = {
                attachmentList: newSopState.sopFileList,
                children: selectedSopList,
                parentId: state.detailId,
                endTime: noNeedData.value.endTime,
                monitorScene: noNeedData.value.monitorScene
            }

            // 只有当 tag === 1 时，才先执行 createSopChildren
            if (noNeedData.value.tag === 1) {
                const createRes = await post(
                    '/solution-ppm/api/v2/built-in-system-ppm/work_order/createSopChildren',
                    params
                )
                if (createRes.code !== 200) {
                    message.error(createRes.message)
                    return
                }
            }

            // 调用 status_change 接口
            const statusChangeRes = await put('/solution-ppm/api/v2/built-in-system-ppm/work_order/status_change', {
                remark: sonState.noNeedRemark,
                status: '无需解决',
                workOrderId: noNeedData.value.id
            })
            if (statusChangeRes.code !== 200) {
                message.error(statusChangeRes.message)
                return
            }

            message.success(statusChangeRes.message)
            cancelNoNeed()
            resetNewState()
            getData()
        } catch (error) {
            if (error?.errorFields) {
                // ✅ 这里确保只有校验失败时才会显示
                message.error('请检查表单填写是否正确')
            } else {
                message.error('操作失败，请重试')
                console.error('错误详情:', error)
            }
        } finally {
            sonState.noNeedLoading = false
        }
    }
    function cancelNoNeed() {
      sonState.noNeedVisible = false
      sonState.noNeedRemark = undefined
      noNeedData.value = {}
    }
    const newRules = {
      solutionDetail: [
        { required: true, message: '' },
        {
          validator: (_, value) => {
            if (!value || !value.ops || value.ops.length === 0) {
              return Promise.reject('解决方案不能为空')
            }
            return Promise.resolve()
          }
        }
      ]
    }
    const resolvedData = ref({})
    function showResolved(record) {
      if (record.tag === 1) {
        get(`/solution-ppm/api/v2/built-in-system-ppm/work_order/${record.id}/sop/steps`).then(data => {
          if (data.code !== 200) {
            message.error(data.message)
            return
          }
          newSopState.sopTableData = groupSopData(data.data.filter(item => item.canCreated))
          newSopState.solvedSOPList = groupSopData(data.data.filter(item => item.solveByMe))
        })
      } else {
        newSopState.sopTableData = []
      }
      newSopState.selectedRowKeys = []
      resolvedData.value = record
      newState.resolvedVisible = true
      newState.workOrderId = record.id
      get(`/solution-ppm/api/v2/built-in-system-ppm/work_order/details/${newState.workOrderId}`).then(data => {
        if (data.code !== 200) {
          message.error(data.message)
          return
        }
        nextTick(() => {
          let solutionDetail = JSON.parse(data.data.workOrderDto.solutionDetail)
          newState.resolvedForm.solution = data.data.workOrderDto.solution
          newState.resolvedForm.attachmentList = data.data.workOrderDto.attachmentList
          resolvedQuillRef.value.setContents(solutionDetail)
        })
      })
    }
    // 上传文件
    function handlerResolvedUpload(file) {
      newState.changeStatusLoading = true
      const data = new FormData()
      data.append('file', file)

      post('/file-storage/api/v1/file/upload', data)
        .then(({ data: { fullUrl } }) => {
          if (data) {
            // 新文件对象
            const newFile = {
              uid: file.uid,
              lastModified: file.lastModified,
              name: file.name,
              size: file.size,
              type: file.type,
              status: 'done',
              url: fullUrl
            }

            // 去重，保留一个副本
            newState.resolvedForm.attachmentList = [
              // 保留已存在文件（去除重复）
              ...newState.resolvedForm.attachmentList.filter(
                item => item.uid !== file.uid && item.name !== file.name
              ),
              // 添加新的文件
              newFile
            ]
          }
          newState.changeStatusLoading = false
        })
        .catch(e => {
          message.error('上传失败' + e)
        })

      return false
    }
    // 移除文件
    function handlerResolvedRemove(file) {
      newState.resolvedForm.attachmentList = newState.resolvedForm.attachmentList.filter(
        item => item.uid !== file.uid
      )
    }
    // 修改解决方案详述。
    const currentCloseData = ref({})
    // 工单开始关闭
    function handlerClose(item) {
        console.log(item)
        if (item.tag === 1) {
            get(`/solution-ppm/api/v2/built-in-system-ppm/work_order/${item.id}/sop/steps`).then(data => {
                if (data.code !== 200) {
                    message.error(data.message)
                    return
                }
                newSopState.sopTableData = groupSopData(data.data.filter(item => item.canCreated))
            })
        } else {
            newSopState.sopTableData = []
        }
        newSopState.selectedRowKeys = []
        currentCloseData.value = item
        newSopState.sopCloseVisible = true
    }
    // 工单确定关闭
    async function confirmSopClose() {
        newSopState.closeLoading = true
        try {
            // ✅ 直接 await 表单校验，不需要 catch
            await closeRef.value.validate()

            const selectedSopList = newSopState.sopTableData.filter(item =>
                newSopState.selectedRowKeys.includes(item.sopStepId)
            )
            const params = {
                attachmentList: newSopState.sopFileList,
                children: selectedSopList,
                parentId: state.detailId,
                endTime: currentCloseData.value.endTime,
                monitorScene: currentCloseData.value.monitorScene
            }

            // 只有当 tag === 1 时，才先执行 createSopChildren
            if (currentCloseData.value.tag === 1) {
                const createRes = await post(
                    '/solution-ppm/api/v2/built-in-system-ppm/work_order/createSopChildren',
                    params
                )
                if (createRes.code !== 200) {
                    message.error(createRes.message)
                    return
                }
            }

            // 调用 status_change 接口
            const statusChangeRes = await put('/solution-ppm/api/v2/built-in-system-ppm/work_order/status_change', {
                remark: newSopState.closeRemark,
                status: '已关闭',
                workOrderId: currentCloseData.value.id
            })
            if (statusChangeRes.code !== 200) {
                message.error(statusChangeRes.message)
                return
            }

            message.success(statusChangeRes.message)
            cancelClose()
            resetNewState()
            getData()
        } catch (error) {
            if (error?.errorFields) {
                // ✅ 这里确保只有校验失败时才会显示
                message.error('请检查表单填写是否正确')
            } else {
                message.error('操作失败，请重试')
                console.error('错误详情:', error)
            }
        } finally {
            newSopState.closeLoading = false
        }
    }
    function cancelClose() {
        newSopState.sopCloseVisible = false
        newSopState.closeRemark = undefined
        currentCloseData.value = {}
    }
    // 提醒
    function toRmind(id) {
      get(`/solution-ppm/api/v2/built-in-system-ppm/work_order/remind/${id}`).then(data => {
        if (data.code !== 200) {
          message.error(data.message)
          return
        }
        message.success('已经向工单关联人员发送提醒解决通知')
      })
    }
    // 多选框改成单选
    function changeStatusSolverChange(value) {
      // if (Array.isArray(value) && value.length > 1) {
      //   newState.circulationForm.solverList = [value[0]] // 只保留第一个选项
      // }
      if (Array.isArray(value)) {
        newState.circulationForm.solverList = [value[value.length - 1]] // 只保留最后一个选项
      } else {
        newState.circulationForm.solverList = [value] // 如果不是数组，说明只选中一个选项
      }
    }
    function fatherSolverChange(value) {
      // if (Array.isArray(value) && value.length > 1) {
      //   state.modalForm.solverList = [value[0]] // 只保留第一个选项
      // }
      if (Array.isArray(value)) {
        state.modalForm.solverList = [value[value.length - 1]] // 只保留最后一个选项
      } else {
        state.modalForm.solverList = [value] // 如果不是数组，说明只选中一个选项
      }
    }
    //     新需求
    //     新需求工单sop
    const newSopState = reactive({
      sopOkLoading: false,
      sopVisible: false,
      selectedRowKeys: [],
      sopTableData: [],
      //   sop父工单开始解决部分
      sopStartTableList: [],
      //   sop工单无需解决
      solvedSOPList: [],
      //   sop工单关闭
      sopCloseTableData: [],
      sopCloseVisible: false,
      //   sop已拒绝部分
      sopRemainingData: [],
      //   新建SOP子工单里的附件
      sopFileList: []
    })
    const sopColumns = [
      {
        title: 'SOP名称',
        dataIndex: 'sopName',
        align: 'center',
        ellipsis: true,
        customCell: ({ rowSpan }) => {
          return {
            rowSpan: rowSpan
          }
        }
      },
      {
        title: 'SOP步骤',
        dataIndex: 'sopStep',
        align: 'center',
        ellipsis: true
      },
      {
        title: '解决角色',
        dataIndex: 'solverRole',
        align: 'center',
        ellipsis: true
      }
    ]
    const deleteRef = ref(null)
    const closeRef = ref(null)
    const noNeedRef = ref(null)
    function groupSopData(data) {
      let currentSopName = ''

      // 遍历数据，计算每一行的 rowSpan
      return data.map((item, index) => {
        if (currentSopName !== item.sopName) {
          // 更新当前的标识符
          currentSopName = item.sopName

          // 计算这个组的 rowSpan
          let rowSpan = 0
          for (let i = index; i < data.length; i++) {
            const currentItem = data[i]
            if (currentSopName === currentItem.sopName) {
              rowSpan += 1
            } else {
              break
            }
          }
          item.rowSpan = rowSpan
        } else {
          item.rowSpan = 0 // 如果是相同的组，重置 rowSpan
        }

        return item
      })
    }
    //     下载sop附件模板
    const downTemplateFileLoading = ref(false)
    function handleDownLoadSopTemplate(record) {
      downTemplateFileLoading.value = true
      post(`/solution-ppm/api/v2/built-in-system-ppm/work_order/download_template/${record.id}`, null, {
        responseType: 'arraybuffer'
      })
        .then(res => {
          downloadZip(res, '附件模板.zip')
        })
        .finally(() => {
          downTemplateFileLoading.value = false
        })
    }
    function downloadZip(response, name) {
      const blob = new Blob([response], { type: 'application/zip;charset=utf-8' })
      const downloadElement = document.createElement('a')
      const href = window.URL.createObjectURL(blob)
      downloadElement.href = href
      downloadElement.download = name // 下载后文件名
      document.body.appendChild(downloadElement)
      downloadElement.click()
      document.body.removeChild(downloadElement)
      window.URL.revokeObjectURL(href)
      return href
    }
    // 重新打开
    function handlerReOpen(item) {
        const params = {
            workOrderId: item.id,
            status: '未开始'
        }
        if(item.actualStartTime){
            params.status='解决中'
        }else{
            params.status='未开始'
        }
        put('/solution-ppm/api/v2/built-in-system-ppm/work_order/status_change', params).then(data => {
            if (data.code !== 200) {
                message.error(data.message)
                return
            }
            message.success(data.message)
            getData()
        })
    }
    function isReOpenDisabled(item){
        return !(state.gdDetail.solvers||state.gdDetail.myCreated)
    }
    function isEditDisabled(item) {
        return ['无需解决', '已关闭', '已解决'].includes(item.status)
    }
//     根因分析
    const rootState=reactive({
        // 责任方
        responsibleParty:undefined,
        responsiblePartyList:[],
        // 业务类型
        businessType:undefined,
        businessTypeList:[],
        rootCauseClassifyList:undefined,
        rootCauseClassify:[],
        // 根因分析
        belongList:[],
        tagList:[],
        rootCauseFlag:false,
        tipVisible:false
    })
    const rootQuillEditor = ref(null)
    async function saveRoot() {
        if (
            state.gdDetail.workOrderDto.status === '已关闭' ||
            state.gdDetail.workOrderDto.status === '已回访'
        ) {
            message.info('请将父工单状态变更为解决中后重试')
            getData()
            return
        }

        newState.saveLoading = true

        const params = {
            responsibleParty: rootState.responsibleParty,
            businessType: rootState.businessType,
            rootCauseClassify: rootState.rootCauseClassify,
            solution: newState.solution,
            solutionDetail: '',
            rootCauseAnalysis: '',
            attachment: JSON.stringify(newState.solveFileList),
            descriptionAttachment: JSON.stringify(newState.descriptionFileList),
            id: state.detailId
        }

        // === 单独处理 solutionEditor 富文本图片上传 ===
        let solutionDeltaContent = null
        try {
            solutionDeltaContent = solutionQuillEditor.value.getContents()
            const solutionUploadTasks = solutionDeltaContent.ops.map(async op => {
                if (op.insert?.image?.startsWith('data:')) {
                    const file = dataURLtoFile(op.insert.image, 'image.png')
                    const { data: { fullUrl } } = await uploadFileAPI(file)
                    op.insert.image = fullUrl
                }
            })
            await Promise.all(solutionUploadTasks)
            params.solutionDetail = JSON.stringify(solutionDeltaContent)
        } catch (e) {
            console.error('处理 solutionQuillEditor 出错：', e)
            // 不 return，继续执行 root 部分
        }

        // === 单独处理 rootEditor 富文本图片上传 ===
        let rootDeltaContent = null
        try {
            rootDeltaContent = rootQuillEditor.value.getContents()
            const rootUploadTasks = rootDeltaContent.ops.map(async op => {
                if (op.insert?.image?.startsWith('data:')) {
                    const file = dataURLtoFile(op.insert.image, 'image.png')
                    const { data: { fullUrl } } = await uploadFileAPI(file)
                    op.insert.image = fullUrl
                }
            })
            await Promise.all(rootUploadTasks)
            params.rootCauseAnalysis = JSON.stringify(rootDeltaContent)
        } catch (e) {
            console.error('处理 rootQuillEditor 出错：', e)
            // 同样不 return，继续提交
        }

        // === 提交接口 ===
        put('/solution-ppm/api/v2/built-in-system-ppm/work_order/detail_modify', params)
            .then(data => {
                if (data.code !== 200) {
                    message.error(data.message)
                    return
                }
                message.success(data.message)
                getData()
            })
            .catch(() => {
                newState.saveLoading = false
            })
            .finally(() => {
                newState.saveLoading = false
            })
    }
    // 获取责任方
    function getResponsiblePartyList() {
        get('/solution-ppm/api/v2/built-in-system-ppm/dictionary/search/GD.ZRF').then(data => {
            rootState.responsiblePartyList = data.data
        })
    }

    // 根据责任方获取业务类型
    function getBusinessTypeList() {
        let envId = rootState.responsiblePartyList.find(item => item.itemName === rootState.responsibleParty)?.itemCode
        console.log(envId);
        get(`/solution-ppm/api/v2/built-in-system-ppm/dictionary/search/${envId}`).then(data => {
            rootState.businessTypeList = data.data
        })
    }

    // 根据业务类型获取根因分析
    function getRootCauseClassifyList() {
        let envId = rootState.businessTypeList.find(item => item.itemName === rootState.businessType)?.itemCode
        get(`/solution-ppm/api/v2/built-in-system-ppm/dictionary/search/${envId}`).then(data => {
            rootState.rootCauseClassifyList = data.data.map(item=>{
                return{
                    ...item
                }
            })
        })
    }
    // 保存切换前值
    const preState = reactive({
        responsibleParty: undefined,
        businessType: undefined,
        rootCauseClassify: undefined
    })

    // 弹窗控制
    const tipState = reactive({
        visible: false,
        pendingField: '',  // 'responsibleParty' | 'businessType' | 'rootCauseClassify'
        nextValue: undefined
    })

    // 判断富文本是否有内容
    function hasEditorContent() {
        const content = rootQuillEditor.value?.getText() || ''
        return content.trim().length > 0
    }

    // === 责任方 change ===
    function responsiblePartyChange(nextVal) {
        if (hasEditorContent()) {
            tipState.visible = true
            tipState.pendingField = 'responsibleParty'
            tipState.nextValue = nextVal
            // 还原选择框临时值
            rootState.responsibleParty = preState.responsibleParty
            return
        }
        applyResponsiblePartyChange(nextVal)
    }
    function applyResponsiblePartyChange(val) {
        rootState.responsibleParty = val
        preState.responsibleParty = val
        rootState.businessType = undefined
        preState.businessType = undefined
        rootState.rootCauseClassify = undefined
        preState.rootCauseClassify = undefined
        clearEditor()
        getBusinessTypeList()
    }

    // === 业务类型 change ===
    function businessTypeChange(nextVal) {

        if (hasEditorContent()) {
            tipState.visible = true
            tipState.pendingField = 'businessType'
            tipState.nextValue = nextVal
            rootState.businessType = preState.businessType
            return
        }
        applyBusinessTypeChange(nextVal)
    }
    function applyBusinessTypeChange(val) {
        rootState.businessType = val
        preState.businessType = val
        rootState.rootCauseClassify = undefined
        preState.rootCauseClassify = undefined
        clearEditor()
        getRootCauseClassifyList()
    }

    // === 根因分析 change ===
    function rootCauseClassifyChange(nextVal) {
        if (hasEditorContent()) {
            tipState.visible = true
            tipState.pendingField = 'rootCauseClassify'
            tipState.nextValue = nextVal
            rootState.rootCauseClassify = preState.rootCauseClassify
            return
        }
        applyRootCauseClassifyChange(nextVal)
    }
    function applyRootCauseClassifyChange(val) {
        rootState.rootCauseClassify = val
        preState.rootCauseClassify = val
        const selected = rootState.rootCauseClassifyList.find(item => item.itemName === val)
        const description = selected?.description || ''
        setEditorText(description)
    }

    // === 弹窗确认 ===
    function confirmRoot() {
        const field = tipState.pendingField
        const val = tipState.nextValue

        if (field === 'responsibleParty') {
            applyResponsiblePartyChange(val)
        } else if (field === 'businessType') {
            applyBusinessTypeChange(val)
        } else if (field === 'rootCauseClassify') {
            applyRootCauseClassifyChange(val)
        }

        tipState.visible = false
    }

    // 弹窗取消
    function cancelRoot() {
        tipState.visible = false
    }

    // 清空富文本
    function clearEditor() {
        rootQuillEditor.value?.setText('')
    }

    // 赋值富文本
    function setEditorText(text) {
        nextTick(() => {
            rootQuillEditor.value?.setText(text)
        })
    }
    import { watchEffect } from 'vue'
    // 初始赋值 preState
    watchEffect(() => {
        preState.responsibleParty = rootState.responsibleParty
        preState.businessType = rootState.businessType
        preState.rootCauseClassify = rootState.rootCauseClassify
    })
    import ButtonItem from './Page3000001042.vue'
    const colorMap = {
        '未开始': { color: '#A9A9A9',    background: '#F6F6F6 !important' },
        '已解决': { color: '#52C41A' , background: '#EDF9E8 !important'},
        '解决中': { color: '#3875FF',  background: '#EBF1FF  !important' },
        '无需解决': { color: '#FFC900' ,background: '#FFF8E0  !important'},
        '已关闭': { color: '#262626',background: '#EBEBEB !important' },
        '已回访': { color: '#9254DE',background: '#EFE6FB !important' },
        '待分发': { color: '#FF7D27', background: '#FFEADC !important' }
    }
    function getColorStyle(status) {
        return colorMap[status] || '#262626'
    }
</script>
<style lang="less" scoped>
    .page_root {
        width: 100%;
        height: 100%;
        overflow: auto;
    }

    .page_root :deep(.@{ant-prefix}-spin-nested-loading),
    .page_root :deep(.@{ant-prefix}-spin-container) {
        height: 100%;
    }

    .page_root :deep(.@{ant-prefix}-spin-container .@{ant-prefix}-table-wrapper) {
        display: flex;
        flex-flow: column nowrap;
        justify-content: flex-start;
    }

    .page_root :deep(.@{ant-prefix}-table) {
        flex: auto;
        overflow: auto;
    }

    .table-moreBtn_down {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        width: 100px;
    }

    .table-moreBtn_menu :deep(.table-moreBtn_menu-item):hover {
        background: #ebf1ff;
    }

    /*  表格树结构样式处理，展开按钮层级增加*/
    :deep(.@{ant-prefix}-table-row-expand-icon) {
        z-index: 1;
    }

    /*  表格树结构 由于每个表格项采用自定义组件，使用绝对定位布局，开启树结构导致显示异常，暂时使用层级定位位置 */
    :deep(.@{ant-prefix}-table-row-level-1 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
        left: 15px !important;
        width: calc(100% - 15px);
    }

    :deep(.@{ant-prefix}-table-row-level-2 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
        left: 30px !important;
        width: calc(100% - 30px);
    }

    :deep(.@{ant-prefix}-table-row-level-3 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
        left: 45px !important;
        width: calc(100% - 45px);
    }

    :deep(.@{ant-prefix}-table-row-level-4 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
        left: 60px !important;
        width: calc(100% - 60px);
    }

    /* 穿梭框改变默认样式，为根据组件样式控制左右栏宽度。 */
    :deep(.@{ant-prefix}-transfer-list) {
        height: 100%;
        width: 50%;
    }

    .vid_4wk3vtmqnu :deep(a) {
        color: undefined;
    }

    :deep(.vid_4wk3vtmqnu.@{ant-prefix}-breadcrumb) > span:last-child a {
        color: undefined;
        opacity: 0.75;
    }

    .vid_4wk3vtmqnu {
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        flex-wrap: undefined;
        margin-bottom: 24px;
        padding-left: 24px;
        background-color: #ffffff;
    }
    /*样式*/
    .body {
        height: 100%;
    }
    .top-information {
        background-color: #fff;
        padding: 21px 24px;
        border-radius: 4px;
    }
    .information-top {
        display: flex;
        justify-content: space-between;
      margin-bottom: 8px;
    }
    .title {
        display: flex;
        height: 22px;
        font-size: 16px;
        line-height: 22px;
        color: #262626;
        letter-spacing: 0;
        font-weight: 600;
        align-items: center;
        gap: 8px;
    }
    .title-icon {
        height: 16px;
        width: 4px;
        background-color: #3875ff;
    }
    .information-table {
        margin-top: 23px;
        border: 1px solid #d9d9d9;
        border-radius: 4px;
    }
    .table-title {
        font-size: 14px;
        color: #595959;
        letter-spacing: 0;
        text-align: right;
        font-weight: 400;
        width: 122px;
        text-align: right;
        line-height: 24px;
        padding: 8px 16px;
        border-right: 1px solid #d9d9d9;
        flex-shrink: 0; /* 不允许压缩 */
        background: #fafafa;
    }
    .table-content {
        padding: 10px 17px;
        font-size: 14px;
        color: #262626;
        letter-spacing: 0;
        font-weight: 500;
    }
    .table-content-one,
    .table-content-four {
        padding: 10px 17px;
        font-size: 14px;
        color: #262626;
        letter-spacing: 0;
        font-weight: 500;
        line-height: 20px;
    }
    .one-line,
    .four-line {
        height: 40px;
        display: flex;
        line-height: 40px;
    }
    .four-line {
        border-top: 1px solid #d9d9d9;
        border-bottom: 1px solid #d9d9d9;
    }
    .table-content-four {
        flex: 1;
        text-overflow: ellipsis; /* 如果内容过长显示省略号 */
        overflow: hidden;
        white-space: nowrap;
    }
    .middle {
        border-left: 1px solid #d9d9d9;
    }
    .middle-div {
        border-bottom: none;
    }
    .problem-description {
        width: 100%;
        padding: 16px 24px;
        background-color: #fff;
        margin-top: 16px;
        border-radius: 4px;
    }
    .description-content {
        background: #fdfdfd;
        border: 1px solid #d9d9d9;
        border-radius: 4px;
        margin-top: 16px;
        padding: 16px;
    }
    .child-inner {
        padding: 16px;
        display: flex;
        align-items: center;
        gap: 32px;
    }
    .item-children .inner-main {
        position: relative;
    }
    .item-children .border-line {
        position: absolute;
        width: 1px;
        height: 14px;
        background-color: #a5a6a7;
        right: -16px;
        top: 50%;
        transform: translate(-50%, -50%);
    }
    .son-gd {
        margin-top: 16px;
        background-color: #fff;
        padding: 21px 24px;
        border-radius: 4px;
    }
    /*样式*/
    .inner-content {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        height: 100%;
        flex: 1;
    }
    .inner-title {
        text-align: right;
    }
    .inner-main {
        display: flex;
        flex: 1;
    }
    .item-children {
        background: #f0f2f5;
        border-radius: 4px 4px 0 0;
        margin-bottom: 16px;
        margin-top: 16px;
        border: 2px solid #f0f2f5;
        border-radius: 4px;
    }
    .item-children .collapse-title-right {
        padding-right: 16px;
    }
    .item-children .collapse-title {
        padding-right: 16px;
        border-bottom: 1px solid #d9d9d9;
    }
    .child-inner {
        padding: 16px;
        display: flex;
        align-items: center;
        background-color: #fff;
        gap: 32px;
    }
    .item-children .inner-main {
        position: relative;
    }
    .item-children .border-line {
        position: absolute;
        width: 1px;
        height: 14px;
        background-color: #a5a6a7;
        right: -16px;
        top: 50%;
        transform: translate(-50%, -50%);
    }
    .collapse-title {
        width: 100%;
        display: flex;
        height: 48px;
        justify-content: space-between;
        background: #ebf1ff;
        border-radius: 4px 4px 0 0;
    }
    .collapse-title-left {
        display: flex;
        width: 30%;
        gap: 8px;
        align-items: center;
        padding: 0 16px;
    }

    .collapse-title-right {
        display: flex;
        align-items: center;
        gap: 16px;
        padding-right: 63px;
    }
    .remark-title-left {
      display: flex;
      width: 65%;
      gap: 8px;
      align-items: center;
      padding: 0 16px;
    }
    .remark-top{
      display: flex;
      justify-content: space-between;
      height: 48px;
      line-height: 48px;
      background: #f0f2f5;
      border-radius: 4px 4px 0 0;
    }
    .remark-title-right {
      display: flex;
      align-items: center;
      gap: 16px;
      padding-right: 24px;
    }
    .gd-title {
        font-size: 18px;
        color: #262626;
        letter-spacing: 0;
        font-weight: 500;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .collapse-title-font,
    .inner-title {
        font-size: 14px;
        color: #595959;
        letter-spacing: 0;
        text-align: right;
        font-weight: 400;
    }
    .collapse-content-font,
    .inner-content {
        font-size: 14px;
        color: #262626;
        letter-spacing: 0;
        font-weight: 500;
    }
    .border-div {
        position: relative;
    }
    .border-line {
        position: absolute;
        width: 1px;
        height: 14px;
        background-color: #a5a6a7;
        right: -8px;
        top: 50%;
        transform: translate(-50%, -50%);
    }
    .collapse-title-right-btn {
        display: flex;
        gap: 16px;
    }
    .btn-item {
        position: relative;
        cursor: pointer;
    }
    .border-btn {
        position: absolute;
        width: 1px;
        height: 14px;
        background-color: #3875ff;
        right: -8px;
        top: 50%;
        transform: translate(-50%, -50%);
    }
    .active-btn {
        position: absolute;
        right: 5px;
        top: 50%;
        transform: translate(-50%, -50%);
    }
    .item-inner {
        background-color: #f8f9fa;
        display: flex;
        padding: 16px;
    }
    .item-children:last-child {
        margin-bottom: 0;
    }
    .body-bottom {
        margin-top: 16px;
        border-radius: 4px;
    }
    .remark-div {
        background-color: #fff;
        padding: 21px 24px;
        border-radius: 4px;
      margin-bottom: 16px;
    }
    .change-record {
        background-color: #fff;
        padding: 21px 24px;
        border-radius: 4px;
    }

    .remark-main {
      background: #FFFFFF;
      box-shadow: 0 2px 5px 0 rgba(0,0,0,0.20);
      border-radius: 4px;
        margin-top: 16px;
        overflow: auto;
    }
    .remark-content {
        padding: 8px 16px;
    }
    .remark-text {
        border: 1px solid #d9d9d9;
        background-color: #fff;
        padding: 16px;
        margin-top: 5px;
        margin-bottom: 16px;
    }
    .remark-title {
        display: flex;
        font-size: 14px;
        color: #595959;
        letter-spacing: 0;
        text-align: right;
        font-weight: 400;
    }
    .remark-weight {
        font-size: 14px;
        color: #262626;
        letter-spacing: 0;
        font-weight: 500;
    }
    .remark-content .collapse-title {
        background-color: #fff;
        border-bottom: 1px solid #d9d9d9;
        margin: 0;
    }
    .remark-inner {
        padding: 16px;
        background-color: #fff;
    }
    .remark-child {
        background: #ffffff;
        border: 1px solid #d9d9d9;
        border-radius: 4px;
        margin-bottom: 16px;
    }
    .default-table {
        margin-top: 16px;
    }
    .default-table:deep(.@{ant-prefix}-table-thead) > tr > th {
        background-color: #3875ff;
        color: #fff;
        font-weight: 600;
        padding: 8px 16px;
        border-right: 1px solid #d9d9d9;
    }
    .default-table :deep(.@{ant-prefix}-table-tbody) tr > td {
        font-size: 14px;
        font-family: arial, helvetica, 'microsoft yahei';
        font-weight: 400;
        color: #595959;
        border-bottom: 1px solid #d9d9d9;
        padding: 8px 16px;
        word-break: break-all;

        .cell-wrapper {
            padding: 0 16px;
        }
    }
    .form-content :deep(.ant3-form-item-label) {
        width: 135px;
    }
    :deep(.ql-blank) {
        min-height: 110px;
        background: #ffffff;
    }
    :deep(.ql-editor) {
        min-height: 110px;
        background: #ffffff;
    }
    .form-content :deep(.ant3-input-number),
    :deep(.ant3-picker) {
        width: 100%;
    }

    .remark-modal :deep(.ql-blank) {
        min-height: 110px;
        background: #ffffff;
    }
    .change-status :deep(.ant3-form-item-label) {
        width: 110px;
    }
    .page_root {
        overflow: auto !important;
    }
    .border-div .border-line {
        right: -8px;
    }
    .remark-main .border-btn {
        right: -8px;
    }
    .remark-main .btn-item {
        color: #3875ff;
    }
    :deep(.ant3-breadcrumb) > span:nth-of-type(2) .ant3-breadcrumb-link {
        color: #262626; /* 设置字体颜色为红色 */
        font-weight: 800;
    }
    .top-title {
        height: 16px;
        padding-left: 8px;
        border-left: 4px solid #3875ff;
        font-size: 16px;
        line-height: 16px;
        color: #262626;
        font-weight: 600;
    }
    .file-content {
        padding: 16px;
        color: #3875ff;
        cursor: pointer;
    }
    .form-content :deep(.ql-snow .ql-editor) img {
        width: 200px;
    }
    .change-status :deep(.ql-snow .ql-editor) img {
      width: 200px;
    } .remark-modal :deep(.ql-snow .ql-editor) img {
      width: 200px;
    }
    .abbreviation :deep(.ql-snow .ql-editor) img {
      width: 200px;
    }
    .description-fileList {
        margin-top: 16px;
    }
    .file-drag {
      padding: 12px 0;
    }
    .ant-upload-drag-icon {
        width: 88px;
        height: 28px;
        border: 1px solid #3875ff;
        line-height: 28px;
        text-align: center;
      left: 50%;
      transform: translate(-50%);
      border-radius: 20px;
      color: #3875ff;
      margin: 16px 0 12px 80px;
    }
    .ant-upload-drag-icon:hover{
      background-color: #3875ff;
      color: #fff;
    }
    .file-top{
      text-align: center;font-size: 14px;
      color: #262626;
      letter-spacing: 0;
      font-weight: 500;
    }
    .file-bottom{
      font-size: 12px;
      color: #595959;
      letter-spacing: 0;
      font-weight: 400;text-align: center
    }
    .opration-content{
      background-image: linear-gradient(92deg, rgba(56,117,255,0.20) 0%, rgba(56,117,255,0.07) 98%);
      border-radius: 4px;
      height: 80px;
      display: flex;
      margin-bottom: 16px;
    }
    .opration-title-icon{
      height: 16px;
      width: 16px;
    }
    .circle {
      position: absolute;
      left: -2px;
      top: -5px;
      width: 16px; /* 设置圆环的宽度 */
      height: 16px; /* 设置圆环的高度 */
      border: 3px solid #3875ff; /* 设置圆环的边框，宽度为8px，颜色为#3875ff */
      border-radius: 50%; /* 将元素设置为圆形 */
    }

    .inner-circle {
      width: 8px; /* 设置中间空白的宽度 */
      height: 8px; /* 设置中间空白的高度 */
      background-color: white; /* 设置中间空白的背景色为白色 */
      border-radius: 50%; /* 将元素设置为圆形 */
      position: absolute; /* 绝对定位，使其位于圆环中间 */
      top: 50%; /* 垂直居中 */
      left: 50%; /* 水平居中 */
      transform: translate(-50%, -50%); /* 将元素水平垂直居中 */

    }
    .item-content {
      flex: 1;
      padding: 16px 24px;
      display: flex;
      flex-direction: column;
      position: relative;
    }
.content-line{
  position: absolute;
  right: 0;
  height: 48px;
  width: 1px;
  background-image: linear-gradient(180deg, rgba(56,117,255,0.00) 0%, #3875FF 50%, rgba(56,117,255,0.00) 100%);
}
    .item-content1 {
      flex: 0 0 15%; /* 最小宽度 */
    }

    .item-content2 {
      flex: 0 0 10%; /* 最大宽度 */
    }
    .item-content3{
      flex: 0 0 15%; /* 最大宽度 */
    }
    .item-content4 {
      max-width: 30%;
    }
    .item-content5 {
      max-width: 15%;
    }

    .operation-log{
      margin-top: 16px;
      border-left: 1px dashed #D9D9D9;
      padding-left: 24px;
      position: relative;
      margin-bottom: 32px;
    }
    .operation-log:last-child{
      border-left: none;
    }

.opration-title{
  height: 50%;
}
.opration-msg{
  flex: 1;
    color: #262626;
    font-weight: 600;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.inner-msg{
    width: 190px;
    color: #262626;
    font-weight: 600;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.title-content{
  position: relative;
  top: -10px;
  font-size: 16px;
  color: #3875ff;
}
.circle-line{
  height: 12px;
  border-left: 1px dashed #D9D9D9;
  position: absolute;
  top: -17px;
  left: 50%;
  transform: translate(-50%);
}
.page_root{
  overflow: hidden!important;
}
.body{
  overflow-y: auto;
  height: calc(100vh - 150px);
}
    .remove-icon :deep(.ant3-select-selection-item-remove){
      display: none !important;
    }
    .description-tip {
      font-size: 14px;
      color: #262626;
      letter-spacing: 0;
      text-align: center;
      font-weight: 400;
      background: rgba(250, 100, 0, 0.1);
      border: 1px solid #fa6400;
      border-radius: 2px;
      padding: 6px 16px;
      margin-bottom: 16px;
    }
    .tip-img {
      width: 16px;
      height: 16px;
      color: #fa6400;
    }
    /*工单SOP*/
    .modal-table :deep(.@{ant-prefix}-table-thead) > tr > th {
      background: #3875ff;
      font-size: 14px;
      font-family: arial, helvetica, 'microsoft yahei';
      font-weight: 600;
      color: #ffffff;
      border-bottom: 1px solid #3875ff;
      padding: 8px 16px;
    }

    .modal-table :deep(.@{ant-prefix}-table-tbody) tr > td {
      font-size: 14px;
      font-family: arial, helvetica, 'microsoft yahei';
      font-weight: 400;
      color: #262626;
      padding: 8px 16px;
      word-break: break-all;
      R .cell-wrapper {
        padding: 0 16px;
      }
    }
    .sop-start-tip {
      height: 40px;
      padding: 12px 16px;
      background: rgba(250, 173, 20, 0.1);
      display: flex;
      font-size: 14px;
      color: #262626;
      font-weight: 400;
      align-items: center;
      gap: 8px;
      margin-bottom: 16px;
    }
    .change-status-resolved {
      display: flex;
      gap: 16px;
    }
    .resolved-div {
      display: flex;
      padding: 10px 16px;
      background: rgba(250, 173, 20, 0.1);
      font-size: 14px;
      color: #262626;
      font-weight: 400;
      gap: 8px;
      margin-bottom: 16px;
        align-items: center;
    }
    .modal-sop-title {
      height: 16px;
      line-height: 16px;
      padding-left: 8px;
      border-left: 4px solid #3875ff;
      font-size: 16px;
      color: #262626;
      letter-spacing: 0;
      font-weight: 600;
      margin-bottom: 16px;
    }
    .gd-status{
        padding: 5px 10px;
        border-radius: 5px;
        border-radius: 0 4px 0 4px;
        text-align: center;
    }
</style>
